/* The Chaos Sanctuary — shared stylesheet */
/* Diablo Heavy, used only for the site title "The Chaos Sanctuary" */
@font-face {
  font-family: "Diablo Heavy";
  src: url("fonts/diablo-heavy.woff2") format("woff2"), url("fonts/diablo-heavy.woff") format("woff");
  font-display: swap;
}
body {
  margin: 0;
  background: #000;
  color: #c8c0a8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.5;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
header { border-bottom: 1px solid #5a1a10; padding: 24px 0 12px; text-align: center; }
header h1 { color: #b8862b; font-family: "Diablo Heavy", "Cinzel", Georgia, serif; font-weight: normal; font-size: 2.2em; margin: 0; letter-spacing: 3px; }
header p { margin: 4px 0 0; color: #8a8270; font-style: italic; }
nav { text-align: center; padding: 10px 0; border-bottom: 1px solid #5a1a10; }
nav a { margin: 0 10px; }
a { color: #b8862b; }
a:visited { color: #9a6f24; }
a:hover { color: #e0b050; }
h2 { color: #b8862b; font-family: "Cinzel", Georgia, serif; font-weight: 600; letter-spacing: 1px; border-bottom: 1px solid #3a2a1a; }
h3 { color: #a03020; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { border: 1px solid #3a2a1a; padding: 6px 8px; text-align: left; vertical-align: top; }
th { background: #1a0d08; color: #b8862b; }
img { max-width: 100%; height: auto; }
.myth { background: #140806; border-left: 3px solid #a03020; padding: 8px 12px; margin: 12px 0; }
footer { border-top: 1px solid #5a1a10; margin-top: 32px; padding: 12px 0; text-align: center; font-size: 0.85em; color: #6a6250; }

/* Tables that may be wider than a phone screen scroll sideways */
.tablewrap { overflow-x: auto; }
nav a { display: inline-block; }
.not { color: #a03020; font-weight: bold; }
.legend { font-size: 0.9em; color: #8a8270; }
.toc { line-height: 1.9; }
.top { font-size: 0.85em; text-align: right; }

/* Item tables */
table.items td { font-size: 0.92em; }
td.item { text-align: center; min-width: 120px; }
td.item img { image-rendering: auto; margin-bottom: 4px; }
td.num { text-align: center; white-space: nowrap; }
td.stats { min-width: 220px; }
.uniq-name { color: #c7a35a; font-weight: bold; }
.set-name { color: #3fbf3f; font-weight: bold; }
.base { color: #8a8270; font-size: 0.9em; }
h2.set-title { color: #3fbf3f; }
tr.subhead td { background: #1a0d08; color: #b8862b; font-weight: bold; }
tr.partset td { background: #0c1a0c; }
tr.fullset td { background: #1a1608; }

/* Stat colours, tuned for the dark background */

/* Horadric Cube ingredient images */
td.cubeicons { width: 190px; min-width: 150px; vertical-align: middle; line-height: 0; }
td.cubeicons img { vertical-align: middle; margin: 2px 1px; }

/* Legacy Toggle: a single button, raised when off, pressed in and lit when on */
.legacy-toggle { text-align: center; margin: 0; padding: 6px 0; border-bottom: 1px solid #5a1a10; }
.legacy-toggle a.toggle {
  display: inline-block; padding: 5px 14px; font-size: 0.9em; text-decoration: none;
  color: #c8c0a8; background: linear-gradient(#3a2a1a, #1a0d08);
  border: 1px solid #5a1a10; border-radius: 3px;
  box-shadow: inset 1px 1px 0 #6a4a2a, inset -1px -1px 0 #0a0503, 0 2px 3px #000;
}
.legacy-toggle a.toggle:hover { color: #e0b050; }
.legacy-toggle a.toggle.on, .legacy-toggle a.toggle:active {
  color: #e0b050; background: linear-gradient(#0a0402, #1a0d08);
  border-color: #4a3018 #8a6a30 #8a6a30 #4a3018;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.85), inset 0 0 6px rgba(0,0,0,0.5), 0 1px 0 #3a2a1a;
  transform: translateY(1px);
  padding: 5px 14px;
}

/* Breakpoints: three tables side by side, stacking on narrow screens */
.bpgrid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
.bp { flex: 0 0 auto; font-size: 0.85em; }
.bp h3 { font-size: 1em; margin: 8px 0 4px; }
.bp table { margin: 0 0 8px; }
.bp table { width: auto; }
.bp td, .bp th { text-align: center; padding: 3px 10px; }
ul.cell { margin: 4px 0 0; padding-left: 20px; }

/* Top banner and menu stay fixed at the top while scrolling */
.topbar { position: sticky; top: 0; z-index: 10; background: #000; }
.topbar header { padding: 12px 0 8px; }
.topbar nav { padding: 8px 0; }
html { scroll-padding-top: 190px; }
@media (max-width: 600px) {
  .topbar header h1 { font-size: 1.25em; letter-spacing: 1px; }
  .topbar header p { font-size: 0.85em; }
  html { scroll-padding-top: 220px; }
}

/* Item search (Items page) */
.searchrow input { width: 100%; max-width: 420px; padding: 6px 8px; margin-top: 4px; font: inherit; color: #c8c0a8; background: #140806; border: 1px solid #5a1a10; border-radius: 3px; }
.searchrow input::placeholder { color: #6a6250; }
ul.hits { list-style: none; padding: 0; }
ul.hits li { padding: 6px 0; border-bottom: 1px solid #3a2a1a; }
.st-plain { color: #e6dfc9; }
.st-cold { color: #7a8cff; }
.st-fire { color: #e0584a; }
.st-light { color: #e8d030; }
.st-poison { color: #3fbf3f; }
.hitstats { font-size: 0.9em; color: #c8c0a8; }
mark { background: #5a1a10; color: #e0b050; }

/* Skills */
.trees { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.tree { flex: 1 1 200px; }
.tree h3 { margin-bottom: 4px; }
ul.skilllist { list-style: none; padding: 0; margin: 0; }
ul.skilllist li { padding: 2px 0; }
ul.skilllist img, h2 img.skillicon { vertical-align: middle; }
.skill h2 { display: flex; align-items: center; gap: 10px; }
.skillmeta { color: #8a8270; margin: 4px 0; }
.syn { margin: 4px 0; font-size: 0.95em; }
table.skilltable { width: auto; font-size: 0.9em; }
table.skilltable td, table.skilltable th { text-align: center; padding: 3px 10px; }
.skilltables { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.skilltables table { margin: 0; }
p.sources { margin-top: 24px; font-size: 0.9em; }
table.affixes td { font-size: 0.9em; padding: 3px 8px; }
table.affixes td.n { text-align: center; }
table.affixes tr.grp th { text-align: left; background: #120806; color: #a03020; padding-top: 8px; }
div.template { border: 1px dashed #5a3a20; padding: 4px 16px 8px; margin: 12px 0; }
pre.template { background: #120806; border: 1px solid #3a2010; padding: 10px; overflow-x: auto; font-size: 0.85em; white-space: pre; }
.st-set { color: #3fbf3f; }
.topbar .subnav { text-align: center; margin: 0; padding: 6px 0; border-bottom: 1px solid #5a1a10; line-height: 1.6; }
html:has(.subnav) { scroll-padding-top: 235px; }
@media (max-width: 600px) { html:has(.subnav) { scroll-padding-top: 275px; } }
table.levels { width: auto; min-width: 60%; }
table.levels td.n { text-align: center; padding: 3px 14px; }
table.levels td.sub { padding-left: 26px; color: #b0a890; }
table.bases td.item { min-width: 120px; }
.base-name { color: #e6dfc9; font-weight: bold; }
.subnav strong { color: #e0b050; }
hr.section { border: 0; border-top: 2px solid #5a1a10; margin: 36px 0 8px; }
table.gemtable td, table.potions td { font-size: 0.92em; }
@media (max-width: 600px) {
  .topbar { position: static; }
  html, html:has(.subnav) { scroll-padding-top: 0; }
}
.bigbutton { text-align: center; margin: 18px 0 24px; }
.bigbutton a { display: inline-block; padding: 14px 32px; font-size: 1.3em; font-family: 'Cinzel', serif; text-decoration: none; color: #e0b050; background: linear-gradient(#3a2a1a, #1a0d08); border: 1px solid #b8862b; border-radius: 4px; box-shadow: inset 1px 1px 0 #6a4a2a, 0 2px 6px #000; }
.bigbutton a:hover { color: #fff0c0; box-shadow: inset 1px 1px 0 #6a4a2a, 0 0 10px #b8862b; }
.buildform { max-width: 640px; }
.buildform label { display: block; margin: 14px 0 4px; color: #b8862b; font-weight: bold; }
.buildform input[type=text], .buildform input[type=email], .buildform textarea { width: 100%; box-sizing: border-box; background: #120806; color: #e6dfc9; border: 1px solid #5a3a20; border-radius: 3px; padding: 8px; font: inherit; }
.buildform input:focus, .buildform textarea:focus { outline: none; border-color: #b8862b; }
.buildform button { padding: 8px 28px; font: inherit; font-size: 1.05em; color: #e0b050; background: linear-gradient(#3a2a1a, #1a0d08); border: 1px solid #b8862b; border-radius: 3px; cursor: pointer; }
.buildform .hp { display: none; }