/* Haven docs: a plain, light reading page. Fixed sidebar, Nunito for the text and
   rounded Fredoka for headings, the game's wood brown as the one accent, and the pixel
   font only for the logo label and the page title. */

:root {
  --bg: #ffffff;
  --bg-side: #faf6ef;        /* warm off-white */
  --text: #2a211b;
  --text-soft: #6b5d52;
  --border: #ece4d8;
  --accent: #8a5a2b;         /* wood brown, from the game */
  --accent-soft: #f6eee2;
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Fredoka', 'Nunito', -apple-system, 'Segoe UI', sans-serif;   /* rounded headings */
  --side-w: 270px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Sidebar ---------- */

.side {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side-w);
  background: var(--bg-side);
  border-right: 1px solid var(--border);
  padding: 28px 16px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.side-brand { display: flex; align-items: center; gap: 10px; color: var(--text); padding: 0 8px; }
.side-brand:hover { text-decoration: none; }
.side-brand img { height: 32px; display: block; }
.side-brand span { font-family: var(--font-pixel); font-size: 9px; color: var(--text-soft); }

.side-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 0 10px;
  margin-bottom: 6px;
}

.side-nav { display: flex; flex-direction: column; gap: 1px; }

.side-nav a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-soft);
}

.side-nav a:hover { background: rgba(138, 90, 43, 0.07); color: var(--text); text-decoration: none; }

.side-nav a.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}

.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.side-foot a { font-size: 13px; color: var(--text-soft); padding: 0 10px; }
.side-foot a:hover { color: var(--accent); }

.side-play {
  display: block;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: #fff !important;
  background: var(--text);
  border-radius: 8px;
  padding: 13px 10px;
  margin: 4px 6px 0;
}

.side-play:hover { background: var(--accent); text-decoration: none !important; }

/* ---------- Content ---------- */

.doc {
  margin-left: var(--side-w);
  padding: 56px 48px 96px;
}

.doc-inner { max-width: 720px; margin: 0 auto; }

.doc-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.doc h1 {
  font-family: var(--font-pixel);
  font-size: 24px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.doc-lead { font-size: 17px; color: var(--text-soft); }

.doc section { margin-top: 52px; padding-top: 8px; }

.doc h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

.doc h3 { font-family: var(--font-head); font-weight: 600; font-size: 19px; margin: 26px 0 8px; }

.doc p + p { margin-top: 12px; }

.doc ul { padding-left: 22px; margin: 12px 0; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--accent); }

.doc strong { font-weight: 650; }

kbd {
  display: inline-block;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 12.5px;
  line-height: 1;
  color: var(--text);
  background: #fbf8f3;
  border: 1px solid var(--border);
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 4px 7px;
  margin: 0 1px;
  white-space: nowrap;
}

table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 12px; border: 1px solid var(--border); }
th { background: var(--bg-side); font-weight: 650; font-size: 13px; }

.hint {
  display: flex;
  gap: 12px;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  font-size: 14.5px;
}

.hint.warn { border-left-color: #c0392b; background: #fdf1ee; }

.hint-icon { flex: none; font-size: 16px; line-height: 1.6; }

.doc-foot {
  margin-top: 64px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-soft);
}

/* ---------- Official $HAVEN contract slot (contract-slot.js fills it from config.js once live) ---------- */
.contract-slot { margin: 18px 0; padding: 14px 16px; border: 1px dashed #d6c7b2; border-radius: 8px; background: var(--bg-side); text-align: center; }
.contract-slot.is-live { border-style: solid; border-color: #5bbf5b; background: #f1fbef; }
.contract-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 6px; }
.contract-value { margin: 0; }
.contract-slot.is-live .contract-value { word-break: break-all; font-family: ui-monospace, monospace; font-weight: 600; }
.contract-actions { display: flex; gap: 10px; justify-content: center; margin: 10px 0 0; }
.contract-copy[hidden] { display: none; }
.contract-copy { display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; vertical-align: middle; padding: 4px;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--accent); cursor: pointer; }
.contract-copy.is-copied { color: #fff; background: #5bbf5b; border-color: #5bbf5b; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .side { position: static; width: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-nav a.active { box-shadow: inset 0 -2px 0 var(--accent); }
  .side-foot { margin-top: 6px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side-play { margin: 0; padding: 10px 16px; }
  .doc { margin-left: 0; padding: 32px 20px 72px; }
  .doc h1 { font-size: 19px; }
}

/* ---------- Pictures ---------- */
.doc-hero { display: block; width: 100%; margin: 28px 0 0; border-radius: 10px; border: 1px solid var(--border); }

.doc-shot { margin: 16px 0 20px; }
.doc-shot img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); image-rendering: pixelated; }
.doc-shot figcaption, .shot-row figcaption { font-size: 13px; color: var(--text-soft); margin-top: 8px; }
.doc-shot.is-sprites img { background: #8fb860; padding: 18px 10px 10px; }

.shot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 20px; }
.shot-row figure { margin: 0; }
.shot-row img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); image-rendering: pixelated; }

/* Who's who: NPC avatars */
.doc ul.npc-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 8px; }
.npc-grid li { display: flex; gap: 12px; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-side); font-size: 14px; line-height: 1.45; }
.npc-grid img { width: 52px; height: 52px; flex: none; image-rendering: pixelated; }
.npc-grid b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.npc-grid small { display: block; font-size: 12px; color: var(--accent); margin-bottom: 2px; }

/* The Purse in four steps */
.doc ol.flow { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; counter-reset: step; }
.flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 14px 10px 12px;
  text-align: center; font-size: 13.5px; line-height: 1.4; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-side); }
.flow li:not(:last-child)::after { content: '\203A'; position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--accent); background: var(--bg); line-height: 1; padding: 0 2px; }
.flow img { width: 44px; height: 44px; image-rendering: pixelated; }
.flow-clock { font-family: var(--font-pixel); font-size: 11px; color: #fff; background: var(--accent); padding: 12px 6px; border-radius: 6px; line-height: 1; }

@media (max-width: 640px) {
  .doc ul.npc-grid { grid-template-columns: 1fr; }
  .shot-row { grid-template-columns: 1fr; }
  .doc ol.flow { grid-template-columns: repeat(2, 1fr); }
  .flow li::after { display: none; }
}