/* Fantasy: warm parchment, forest ink, and a subtle diamond pattern */
html[data-theme="fantasy"] {
  color-scheme: light;
  --page-bg: #d8c9a8;
  --surface: #eee3c8;
  --surface-raised: #e4d5b4;
  --text: #292a20;
  --muted: #625d4c;
  --accent: #8d5429;
  --accent-contrast: #fffaf0;
  --border: rgb(70 55 32 / 24%);
  --shadow: 0 16px 40px rgb(54 42 23 / 15%);
  --body-font: Georgia, "Times New Roman", serif;
  --heading-font: Georgia, "Times New Roman", serif;
}

html[data-theme="fantasy"] body {
  background-color: var(--page-bg);
  background-image:
    linear-gradient(45deg, rgb(105 79 39 / 4%) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(105 79 39 / 4%) 25%, transparent 25%);
  background-size: 18px 18px;
}

html[data-theme="fantasy"] header {
  background-image: linear-gradient(110deg, transparent 50%, rgb(141 84 41 / 8%));
}

html[data-theme="fantasy"] header::after {
  content: "◇";
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 400;
  line-height: 1;
  opacity: 0.16;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Sci-Fi / Cyberpunk: dark panels, cyan accents, and a quiet interface grid */
html[data-theme="scifi"] {
  color-scheme: dark;
  --page-bg: #071317;
  --surface: #102329;
  --surface-raised: #153039;
  --text: #e4fbf7;
  --muted: #9bbdbb;
  --accent: #43e0cc;
  --accent-contrast: #06201e;
  --border: rgb(91 222 210 / 22%);
  --shadow: 0 16px 40px rgb(0 0 0 / 28%);
  --body-font: "Courier New", monospace;
  --heading-font: "Courier New", monospace;
}

html[data-theme="scifi"] body {
  background-color: var(--page-bg);
  background-image:
    linear-gradient(rgb(74 196 190 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(74 196 190 / 5%) 1px, transparent 1px);
  background-size: 32px 32px;
}

html[data-theme="scifi"] h1 {
  color: #8ff7e8;
  text-shadow: 0 0 22px rgb(67 224 204 / 20%);
}

html[data-theme="scifi"] header::after {
  content: "⬡";
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  opacity: 0.17;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Eldritch Horror: deep green-black surfaces and diffuse, low-contrast haze */
html[data-theme="eldritch"] {
  color-scheme: dark;
  --page-bg: #101510;
  --surface: #1a211b;
  --surface-raised: #242d25;
  --text: #e4e9dd;
  --muted: #aab5a4;
  --accent: #a4bd78;
  --accent-contrast: #11170e;
  --border: rgb(177 203 145 / 19%);
  --shadow: 0 16px 40px rgb(0 0 0 / 32%);
  --body-font: Georgia, "Times New Roman", serif;
  --heading-font: Georgia, "Times New Roman", serif;
}

html[data-theme="eldritch"] body {
  background-color: var(--page-bg);
  background-image:
    radial-gradient(ellipse at 15% 12%, rgb(95 124 76 / 14%), transparent 38%),
    radial-gradient(ellipse at 85% 60%, rgb(64 101 81 / 12%), transparent 42%);
}

html[data-theme="eldritch"] header {
  background-image: linear-gradient(120deg, rgb(111 143 89 / 8%), transparent 60%);
}

html[data-theme="eldritch"] header::after {
  content: "◉";
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  opacity: 0.14;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Post-Apocalyptic: dusty surfaces, rust accents, and a restrained hazard stripe */
html[data-theme="wasteland"] {
  color-scheme: dark;
  --page-bg: #211916;
  --surface: #30231e;
  --surface-raised: #3b2b23;
  --text: #f1e3d2;
  --muted: #c3a991;
  --accent: #e08a45;
  --accent-contrast: #21140c;
  --border: rgb(230 162 103 / 21%);
  --shadow: 0 16px 40px rgb(0 0 0 / 30%);
  --body-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font: "Arial Black", Impact, sans-serif;
}

html[data-theme="wasteland"] body {
  background-color: var(--page-bg);
  background-image:
    radial-gradient(ellipse at 80% 5%, rgb(178 103 54 / 13%), transparent 42%),
    repeating-linear-gradient(
      135deg,
      transparent 0 34px,
      rgb(230 162 103 / 2%) 34px 36px
    );
}

html[data-theme="wasteland"] header {
  border-top: 4px solid var(--accent);
}

html[data-theme="wasteland"] header::after {
  content: "⚙";
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  opacity: 0.15;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Keep the themes readable and untextured when printing */
@media print {
  html[data-theme] body {
    background: #fff !important;
  }

  html[data-theme] header::after {
    display: none;
  }
}