/* THE GRAVE OF BELLS — story skin.
 *
 * css/game.css ships byte-identical from the TIFE Core 2.3.1 kit and is
 * verified against docs/engine-purity.json.  Everything below is additive and
 * lives in this file only.
 *
 * Palette: gold-black chitin, warm resin, bell bronze, and the one cold thing
 * in the mountain (the dead house) as the danger colour.
 */

:root {
  --primary: #e8c887;
  --bright: #fff0c6;
  --dim: #9a7c46;
  --line: #5b4520;
  --bg: #0a0805;
  --panel: #100c06;
  --panel2: #16100a;
  --warn: #ffd98a;
  --danger: #d8b9ff;
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

body {
  background: #0a0805;
}

.shell {
  background: radial-gradient(circle at 50% 30%, #1a1209 0, #0c0906 55%, #050403 100%);
}

.topbar,
.footerbar {
  background: linear-gradient(180deg, #17110a, #0c0805);
}

.logo {
  text-shadow: 0 0 calc(9px * var(--glow)) #d9a94a;
}

/* The cover column must scroll: a blurb one paragraph too long otherwise
   pushes the start button off the bottom of a 1080p viewport, where neither a
   player nor a test harness can reach it. */
.cover-content {
  overflow-y: auto;
  max-height: 100vh;
  padding-bottom: 24px;
}

.cover-art {
  background: radial-gradient(circle at 50% 80%, #3a2a10 0, #120c06 60%, #000 100%);
}

/* --- terminal voices --------------------------------------------------- */
.output.story {
  color: #f0dcb0;
  white-space: pre-wrap;
  line-height: 1.5;
  margin: 6px 0;
}

.output.command {
  color: #b9903f;
  letter-spacing: .04em;
}

.output.system {
  color: #9fc0a6;
}

.output.warning {
  color: #ffd98a;
  border-left: 2px solid #7a5c1c;
  padding-left: 9px;
}

.output.error {
  color: #d8b9ff;
}

.output.title {
  color: #fff0c6;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* --- story verbs ------------------------------------------------------- */
.button-row button[data-story-verb] {
  border-color: #7a5c1c;
  background: #1d1408;
  color: var(--bright);
  letter-spacing: .06em;
}

.button-row button[data-story-verb]:hover {
  background: #3a2810;
}

/* --- the chart of the Kell -------------------------------------------- */
.gob-chart {
  font-size: 11px;
  line-height: 1.35;
}

.gob-region {
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid #2e2311;
}

.gob-region-name {
  color: #c8a25a;
  letter-spacing: .08em;
  font-size: 10px;
  margin-bottom: 2px;
}

.gob-shut .gob-region-name {
  color: #5b4520;
}

.gob-room {
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gob-here {
  color: #fff0c6;
  background: #2a1e0c;
}

.gob-seen {
  color: #c9b183;
}

.gob-unseen {
  color: #4a3a1c;
}

/* --- the scent slate --------------------------------------------------- */
.gob-slate {
  margin-top: 9px;
  border: 1px solid #5b4520;
  padding: 6px 7px;
  background: #14100a;
}

.gob-slate-title {
  font-size: 10px;
  letter-spacing: .1em;
  color: #c8a25a;
  margin-bottom: 4px;
}

.gob-slate-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  padding: 1px 0;
}

.gob-slate-row b {
  letter-spacing: .08em;
}

.gob-slate-empty {
  color: #7b6636;
  display: block;
  font-style: italic;
}

.gob-empty {
  color: #5b4520;
}

.gob-open {
  color: #ffd98a;
}

.gob-sealed {
  color: #b9e6c0;
}

.gob-spent {
  color: #8ea8d8;
}

/* --- focus and hidden state ------------------------------------------- */
:focus-visible {
  outline: 2px solid #ffd98a;
  outline-offset: 2px;
}

/* [hidden] does not hide an element whose class sets display:flex. */
.caption-region[hidden] {
  display: none;
}

.caption-region {
  background: #1d1408;
  border: 1px solid #7a5c1c;
  color: #ffe9b8;
}

body.high-contrast {
  --primary: #ffe9b8;
  --bright: #ffffff;
  --dim: #d0b070;
  --line: #b08a3a;
}