/*
 * Eonweld: an illuminated atlas.
 *
 * The map is a plate in an atlas and the rest is the book it is bound into:
 * parchment, sepia ink, a little gold leaf, vermilion for the god's own hand.
 * Nothing here should look like a control room. No fonts are fetched; the
 * serif stack reaches for Palatino, which Windows and macOS both carry.
 */

:root {
  --night: #0e1019;
  --night-2: #181c2a;
  --glass: rgba(22, 20, 28, 0.72);
  --glass-line: rgba(214, 178, 96, 0.38);

  --parchment: #f2e7d0;
  --parchment-2: #e9dbbd;
  --parchment-edge: #cdb98f;
  --ink: #33261a;
  --ink-soft: #6f5d46;
  --ink-faint: #9a8766;
  --rule: rgba(90, 66, 36, 0.28);

  --gold: #c9a24b;
  --gold-bright: #ecd08a;
  --vermilion: #b4432c;
  --lapis: #46589a;
  --moss: #4f7a52;

  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--parchment);
  font: 15px/1.5 var(--serif);
  overflow: hidden;
}

button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.stage {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 460px);
}

/* ------------------------------------------------------------------ the map */

.map-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, #1c2740 0%, #121726 55%, #090a10 100%);
  overflow: hidden;
}
#map { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

/* A soft darkening toward the edges, so the plate sits in the page. */
.map-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 140px 30px rgba(5, 6, 12, 0.75);
}

.masthead, .lenses, .hand, .timeline, .readout { position: absolute; z-index: 2; }

.masthead { left: 26px; top: 18px; max-width: 430px; pointer-events: none; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); }
.title {
  margin: 0;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  line-height: 1;
}
.title::after {
  content: "";
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 8px;
  border-top: 1px solid var(--glass-line);
  border-bottom: 1px solid rgba(214, 178, 96, 0.18);
}
.caption { margin: 8px 0 0; font-size: 14px; color: #e6dcc6; font-style: italic; }
.caption b { font-weight: 400; font-style: normal; font-variant-numeric: lining-nums tabular-nums; color: #fff4d8; }
.caption-year { font-style: normal; letter-spacing: 0.08em; font-variant-caps: small-caps; font-size: 16px; color: #fff4d8; }
.caption .dot { margin: 0 5px; color: var(--gold); }
.num { font-variant-numeric: lining-nums tabular-nums; }

/* Glass: every control that floats on the map sits on the same smoked pane. */
.lenses, .hand, .timeline, .readout {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 240, 200, 0.08);
}

.lenses {
  top: 20px;
  right: 20px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  max-width: calc(100% - 470px);
  overflow-x: auto;
  scrollbar-width: none;
}
.lenses::-webkit-scrollbar { display: none; }
.lenses button { flex: none; white-space: nowrap; }
.lenses button {
  background: none;
  border: 0;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: #d9cdb2;
  transition: background 0.2s, color 0.2s;
}
.lenses button:hover { color: #fff4d8; background: rgba(236, 208, 138, 0.1); }
.lenses button[aria-pressed="true"] {
  color: #241a0c;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.hand {
  left: 18px;
  top: 150px;
  bottom: 104px;
  width: 152px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 9px 8px 6px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 178, 96, 0.35) transparent;
}
.power { text-align: center; padding: 2px 0 6px; border-bottom: 1px solid rgba(214, 178, 96, 0.22); }
.power b { display: block; font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--gold-bright); font-variant-numeric: lining-nums tabular-nums; }
.power span { font-size: 11.5px; font-style: italic; color: #b7aa8c; letter-spacing: 0.04em; }
.hand-group { font-size: 11px; font-style: italic; color: #b7aa8c; margin: 6px 2px 1px; }
.hand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.hand-title {
  font-variant-caps: small-caps;
  letter-spacing: 0.14em;
  font-size: 12.5px;
  text-align: center;
  color: var(--gold-bright);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(214, 178, 96, 0.22);
  margin-bottom: 2px;
}
.hand-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px 4px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: none;
  font-size: 11.5px;
  line-height: 1.15;
  color: #d9cdb2;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.hand-button svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.hand-button svg.line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hand-button:hover { background: rgba(236, 208, 138, 0.1); color: #fff4d8; }
.hand-button[aria-pressed="true"] {
  color: #fff1de;
  border-color: rgba(226, 120, 92, 0.75);
  background: radial-gradient(circle at 50% 35%, rgba(196, 84, 56, 0.55), rgba(140, 52, 34, 0.35));
  box-shadow: 0 0 18px rgba(196, 84, 56, 0.35);
}
.hand-button.quiet { margin-top: 6px; border-top: 1px solid rgba(214, 178, 96, 0.22); border-radius: 0 0 10px 10px; padding-top: 8px; font-size: 11.5px; flex: none; }
.hand-button.dear { opacity: 0.45; }

/* What the god was told, when an act was not allowed. Said once, and it fades. */
.said {
  position: absolute;
  z-index: 3;
  left: 186px;
  top: 160px;
  max-width: 340px;
  padding: 9px 15px;
  border-radius: 12px;
  font-style: italic;
  font-size: 14px;
  color: #ffe9d6;
  background: rgba(96, 34, 22, 0.88);
  border: 1px solid rgba(226, 120, 92, 0.7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s, transform 0.35s;
  pointer-events: none;
}
.said.show { opacity: 1; transform: none; }

/* Which craft a people shall dream of. */
.chooser {
  position: absolute;
  z-index: 4;
  left: 186px;
  top: 150px;
  width: 300px;
  max-height: calc(100% - 270px);
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.chooser[hidden] { display: none; }
.chooser h3 { margin: 0 0 2px; font-weight: 400; font-size: 15px; font-variant-caps: small-caps; letter-spacing: 0.1em; color: var(--gold-bright); }
.chooser p { margin: 0 0 8px; font-size: 12.5px; font-style: italic; color: #b7aa8c; }
.chooser button { display: flex; width: 100%; justify-content: space-between; gap: 10px; text-align: left; background: none; border: 0; border-top: 1px solid rgba(214, 178, 96, 0.16); padding: 6px 2px; font-size: 14px; color: #efe5cc; }
.chooser button:hover { color: #fff; background: rgba(236, 208, 138, 0.1); }
.chooser button[disabled] { color: #8a8070; cursor: default; background: none; }
.chooser button small { font-size: 12px; font-style: italic; color: #b7aa8c; white-space: nowrap; }
.chooser .close { justify-content: center; margin-top: 4px; font-style: italic; color: #b7aa8c; }

.readout {
  left: 186px;
  bottom: 104px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-style: italic;
  color: #efe5cc;
  pointer-events: none;
  border-radius: 10px;
  max-width: calc(100% - 220px);
}
.readout:empty { display: none; }
.readout .cost { color: var(--gold-bright); font-style: normal; }
.readout .no { color: #f0a08a; }

.timeline {
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px 10px 12px;
  border-radius: 18px;
}

.play {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 236, 180, 0.6);
  background: radial-gradient(circle at 35% 30%, #f6dc98, var(--gold) 60%, #94722c);
  color: #2a1e0c;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.15s, box-shadow 0.15s;
}
.play:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(201, 162, 75, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.play svg { width: 22px; height: 22px; fill: currentColor; }
.play .icon-pause { display: none; }
.play.running .icon-play { display: none; }
.play.running .icon-pause { display: block; }

.pace { flex: none; display: flex; align-items: center; gap: 2px; }
.pace button, .leap button {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13.5px;
  font-variant-numeric: lining-nums tabular-nums;
  color: #d9cdb2;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pace button:hover, .leap button:hover { color: #fff4d8; background: rgba(236, 208, 138, 0.1); }
.pace button[aria-pressed="true"] { color: var(--gold-bright); border-color: var(--glass-line); background: rgba(236, 208, 138, 0.08); }
.pace-label { margin-left: 6px; font-size: 12.5px; font-style: italic; color: #b7aa8c; white-space: nowrap; }

.leap { flex: none; display: flex; gap: 2px; padding-left: 12px; border-left: 1px solid rgba(214, 178, 96, 0.22); }
.leap button { border-color: rgba(214, 178, 96, 0.28); }

.scrub-wrap { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 1px; }
.scrub-foot { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-style: italic; color: #b7aa8c; min-height: 18px; }
.text-button { background: none; border: 0; padding: 0; font-style: italic; font-size: 12.5px; color: var(--gold-bright); text-decoration: underline; text-decoration-color: rgba(236, 208, 138, 0.4); text-underline-offset: 3px; }
.text-button:hover { color: #fff4d8; }
.text-button[hidden] { display: none; }

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(236, 208, 138, 0.85), rgba(236, 208, 138, 0.25));
}
input[type=range]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(236, 208, 138, 0.85), rgba(236, 208, 138, 0.25));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -6px;
  transform: rotate(45deg);
  border-radius: 3px;
  background: linear-gradient(135deg, #fff0bf, var(--gold));
  border: 1px solid #6e5420;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
input[type=range]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  border-radius: 3px;
  background: linear-gradient(135deg, #fff0bf, var(--gold));
  border: 1px solid #6e5420;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.genesis { left: 18px; top: 106px; border-radius: 12px; font-size: 13.5px; }
.genesis.library { top: 106px; left: 176px; }
.library-body { width: 330px; }
.kept-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow-y: auto; margin-bottom: 4px; }
.kept-list:empty::before { content: "Nothing is kept yet."; font-style: italic; color: #b7aa8c; font-size: 13px; }
.kept { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(214, 178, 96, 0.16); padding: 5px 2px; color: #efe5cc; font-size: 14px; }
.kept:hover { background: rgba(236, 208, 138, 0.1); color: #fff; }
.kept .kept-name { font-variant-caps: small-caps; letter-spacing: 0.06em; }
.kept .kept-when { margin-left: auto; font-size: 12px; font-style: italic; color: #b7aa8c; white-space: nowrap; }
.mark-attention { color: var(--gold-bright); }
.kept-note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; font-style: italic; color: #b7aa8c; min-height: 16px; }

.genesis summary {
  list-style: none;
  padding: 6px 14px;
  cursor: pointer;
  color: #d9cdb2;
  font-variant-caps: small-caps;
  letter-spacing: 0.1em;
}
.genesis summary::-webkit-details-marker { display: none; }
.genesis summary::before { content: "✦"; color: var(--gold); margin-right: 8px; font-size: 11px; }
.genesis summary:hover { color: #fff4d8; }
.genesis-body { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; padding: 4px 14px 14px; width: 270px; }
.genesis-body label { font-style: italic; color: #b7aa8c; }
.genesis-body input, .genesis-body select {
  background: rgba(8, 8, 12, 0.55);
  border: 1px solid rgba(214, 178, 96, 0.3);
  border-radius: 8px;
  padding: 5px 9px;
  color: #f3e9d2;
  min-width: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.genesis-body select option { color: #1d160c; background: var(--parchment); }
.gold-button {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 236, 180, 0.6);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #241a0c;
  letter-spacing: 0.06em;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.gold-button:hover { filter: brightness(1.08); }

/* ----------------------------------------------------------------- the book */

.book {
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.26  0 0 0 0 0.12  0 0 0 0.09 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"),
    radial-gradient(130% 80% at 30% 0%, #f8eedb 0%, var(--parchment) 45%, var(--parchment-2) 100%);
  box-shadow: inset 14px 0 28px -14px rgba(60, 40, 14, 0.55), inset 0 0 70px rgba(120, 90, 40, 0.22);
  border-left: 1px solid #5d4a2a;
}

.page { min-height: 0; display: flex; flex-direction: column; padding: 14px 22px 0 24px; }
.page-instrument { flex: none; max-height: 52%; }
.page-chronicle { flex: 1; padding-top: 6px; }

.page-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-title::before, .page-title::after {
  content: "";
  flex: 1;
  height: 5px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid rgba(90, 66, 36, 0.14);
}
.page-title span::before, .page-title span::after { content: "✦"; color: var(--gold); font-size: 10px; margin: 0 9px; vertical-align: 2px; letter-spacing: 0; }

#instrument { display: block; width: 100%; height: 252px; flex: none; }

.peoples { flex: 1; min-height: 60px; overflow-y: auto; padding: 8px 2px 10px; border-top: 1px solid var(--rule); margin-top: 6px; }
.peoples-title { font-style: italic; color: var(--ink-soft); font-size: 13.5px; margin-bottom: 6px; text-align: center; }
.people { padding: 5px 0 7px; border-bottom: 1px dotted var(--rule); }
.people:last-child { border-bottom: 0; }
.people-head { display: flex; align-items: baseline; gap: 8px; }
.people .chip { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); flex: none; align-self: center; box-shadow: 0 0 0 1px rgba(60, 40, 14, 0.35); }
.people .name { font-variant-caps: small-caps; letter-spacing: 0.08em; font-size: 15.5px; color: var(--ink); }
.people .count { margin-left: auto; color: var(--ink-soft); font-size: 13px; font-style: italic; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.people .knows { margin: 1px 0 0 18px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.people .knows em { color: var(--ink); font-style: italic; }

.telling { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: -2px 0 8px; font-style: italic; color: var(--ink-soft); font-size: 13.5px; }
.telling select {
  background: rgba(255, 250, 235, 0.6);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 12px;
  color: var(--ink);
  font-style: italic;
  max-width: 250px;
}
.telling select:hover { border-color: var(--gold); }

.event .told { display: block; font-size: 12px; font-style: italic; color: var(--ink-faint); margin-top: 1px; }
.event.t-legend .text { color: #4a3a6a; }
.event.t-myth .text { color: var(--lapis); font-style: italic; }
.event.t-memory .mark { background: var(--moss); }
.event.t-legend .mark { background: #7a5a9c; }
.event.t-myth .mark { background: var(--lapis); border-radius: 50%; }

.link.forward { border-left-color: rgba(79, 122, 82, 0.4); }
.link.forward::before { border-color: rgba(79, 122, 82, 0.7); }
.chain-note { font-style: italic; color: var(--ink-soft); font-size: 12.5px; margin: 3px 0 0 12px; }
.chain-title.then { color: var(--moss); margin-top: 9px; }
.digest-item { padding: 5px 0 6px; border-bottom: 1px dotted var(--rule); cursor: pointer; }
.digest-item:last-of-type { border-bottom: 0; }
.digest-item:hover { background: rgba(201, 162, 75, 0.14); }
.digest-item .year { color: var(--vermilion); font-size: 12.5px; margin-right: 8px; font-variant-numeric: oldstyle-nums tabular-nums; }
.digest-item .because { display: block; font-size: 12.5px; font-style: italic; color: var(--ink-soft); margin: 1px 0 0 2px; }
.ask { margin-top: 9px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ask button { background: linear-gradient(180deg, #f7e7b8, #e2c77e); border: 1px solid #a88a3c; border-radius: 999px; padding: 3px 14px; color: #33261a; font-size: 13px; }
.ask button[disabled] { opacity: 0.55; cursor: default; }
.ask button.tier-1 { background: linear-gradient(180deg, #f6ecd2, #e6d7ae); }
.ask button.tier-3 { background: linear-gradient(180deg, #e9d3cb, #d3a596); border-color: #8e4a39; }
.told.chapter { font-size: 14px; line-height: 1.62; border-left-width: 3px; }
.ask .allowance { font-size: 12px; font-style: italic; color: var(--ink-soft); }
.told { margin-top: 8px; padding: 8px 11px; border-left: 2px solid var(--lapis); color: var(--lapis); font-style: italic; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.told small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); font-style: normal; }

.chain-record { margin: 0 0 8px; padding: 0 0 7px; border-bottom: 1px dotted var(--rule); }
.chain-record b { font-weight: 400; font-variant-caps: small-caps; letter-spacing: 0.1em; color: var(--ink-soft); }

.chain {
  flex: none;
  max-height: 38%;
  overflow-y: auto;
  margin: 0 0 8px;
  padding: 9px 12px 10px 14px;
  font-size: 13.5px;
  background: rgba(255, 250, 235, 0.55);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(80, 56, 20, 0.12);
}
.chain:empty { display: none; }
.chain-title { font-variant-caps: small-caps; letter-spacing: 0.12em; color: var(--vermilion); font-size: 13.5px; margin-bottom: 5px; }
.link { display: flex; gap: 10px; padding: 2px 0 2px 12px; border-left: 2px solid rgba(180, 67, 44, 0.3); cursor: pointer; position: relative; }
.link::before { content: ""; position: absolute; left: -5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--parchment); border: 2px solid rgba(180, 67, 44, 0.55); }
.link.sel::before { background: var(--vermilion); border-color: var(--vermilion); }
.link:hover { background: rgba(201, 162, 75, 0.14); }

.events { flex: 1; overflow-y: auto; padding: 0 4px 22px 0; scroll-behavior: smooth; }
.century {
  margin: 14px 0 6px;
  text-align: center;
  font-variant-caps: small-caps;
  letter-spacing: 0.16em;
  font-size: 14px;
  color: var(--ink-soft);
}
.century:first-child { margin-top: 2px; }
.century::before, .century::after { content: "—"; margin: 0 8px; color: var(--ink-faint); }

.event {
  display: grid;
  grid-template-columns: 38px 12px 1fr;
  gap: 0 7px;
  align-items: baseline;
  padding: 3px 6px 3px 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}
.event:hover { background: rgba(201, 162, 75, 0.16); }
.event .year { text-align: right; font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: oldstyle-nums tabular-nums; }
.event .year.same { visibility: hidden; }
.event .mark { width: 7px; height: 7px; border-radius: 1.5px; transform: rotate(45deg); justify-self: center; align-self: center; background: var(--ink-faint); }
.event .text { font-size: 14.5px; line-height: 1.42; }

.event.k-found .mark, .event.k-know .mark { background: var(--gold); }
.event.k-war .mark, .event.k-fall .mark { background: var(--vermilion); }
.event.k-water .mark { background: #3f7fae; }
.event.k-rule .mark { background: #7a5a9c; }
.event.k-death .mark { background: #4a4238; }
.event.k-trade .mark { background: var(--moss); }
.event.k-fall .text { color: #6d2a1b; }

.event.player .text { color: var(--vermilion); font-style: italic; }
.event.player .mark { background: var(--vermilion); box-shadow: 0 0 0 2px rgba(180, 67, 44, 0.22); }
.event.belief .text { color: var(--lapis); font-style: italic; }
.event.belief .mark { background: var(--lapis); border-radius: 50%; }
.event.hi { background: rgba(201, 162, 75, 0.12); }
.event.sel { background: rgba(201, 162, 75, 0.3); box-shadow: inset 2px 0 0 var(--vermilion); }

.link .year { color: var(--ink-faint); font-size: 12.5px; min-width: 3.5ch; text-align: right; flex: none; font-variant-numeric: oldstyle-nums tabular-nums; }
.link .text { flex: 1; }
.empty { color: var(--ink-soft); font-style: italic; padding: 18px 4px; text-align: center; }

/* Scrollbars that belong to the page they are on. */
.book ::-webkit-scrollbar { width: 9px; }
.book ::-webkit-scrollbar-thumb { background: rgba(110, 84, 40, 0.35); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.book ::-webkit-scrollbar-thumb:hover { background: rgba(110, 84, 40, 0.6); background-clip: padding-box; border: 2px solid transparent; }
.book ::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 42%; }
  .book { border-left: 0; border-top: 1px solid #5d4a2a; flex-direction: row; }
  .page { flex: 1; max-height: none; }
  .page-instrument { max-height: none; }
  .lenses { max-width: calc(100% - 40px); top: 78px; right: 12px; }
  .genesis { display: none; }
  .pace-label { display: none; }
  .title { font-size: 24px; }
}

/* The active hand's controls, separate from the act catalogue. */
.tool-settings { position: absolute; z-index: 3; top: 150px; right: 14px; width: 222px; max-height: calc(100% - 260px); overflow: auto; padding: 13px; color: #eee2c4; background: rgba(20,24,28,.94); border: 1px solid #8b7850; border-radius: 10px; font-size: 12px; box-shadow: 0 8px 24px #0006; }
.tool-settings b { display: block; font-size: 17px; color: var(--gold-bright); margin-bottom: 9px; }
.tool-settings label { display: block; margin: 7px 0; }
.tool-settings select, .tool-settings input:not([type=checkbox]) { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; }
.tool-settings select, .tool-settings input[type=number], .tool-settings input:not([type]) { color: #f6eace; background: #262d32; border: 1px solid #807252; border-radius: 4px; padding: 5px; }
.tool-settings p { line-height: 1.4; margin: 8px 0; }
.tool-settings .selection-actions { display: flex; gap: 6px; }
.tool-settings button { padding: 7px; border: 1px solid #8b7850; border-radius: 4px; }
.tool-settings button:disabled { opacity: .45; cursor: default; }
.tool-settings .life-key { font-size: 11px; color: #c0b69e; }
#action-preview { color: #f4dca4; }
.battle-report { position: absolute; z-index: 3; left: 190px; bottom: 142px; max-width: 420px; padding: 10px 14px; background: #28201bee; border-left: 3px solid #dc896b; color: #fff1d1; font-size: 13px; pointer-events: none; }
@media (max-width: 900px) { .tool-settings { top: 142px; right: 8px; width: 182px; font-size: 11px; } }

.tool-settings [hidden] { display: none !important; }

#narrator-settings { border-top: 1px solid #6d6248; padding-top: 9px; margin-top: 9px; }
#narrator-settings summary { cursor: pointer; color: #f1dba4; }
#narrator-key { color: #f6eace; background: #262d32; border: 1px solid #807252; border-radius: 4px; padding: 5px; }

.disease-register { padding: 10px 0; font-size: 12px; border-top: 1px solid #a3906d; }
.disease-register:empty { display: none; }
.disease-register p { margin: 5px 0; }
#voice-settings { border-top: 1px solid #6d6248; padding-top: 9px; margin-top: 9px; }
#voice-settings summary { cursor: pointer; color: #f1dba4; }
#voice-settings input[type=password] { color: #f6eace; background: #262d32; border: 1px solid #807252; border-radius: 4px; padding: 5px; }

.page-instrument { overflow-y: auto; }
.disease-register { flex: none; }
.compact-tools { display: none; }
@media (max-width: 900px) {
  body { overflow-y: auto; }
  .stage { display: block; height: auto; }
  .map-panel { height: max(660px, 92vh); }
  .book { display: flex; flex-direction: column; height: 960px; }
  .page { min-width: 0; }
  .page-instrument { flex: none; max-height: 50%; }
  .page-chronicle { flex: 1; }
  .masthead { top: 8px; }
  .caption { font-size: 11px; margin-top: 6px; }
  .lenses { left: 12px; right: 12px; top: 78px; max-width: none; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .lenses button { flex: none; }
  .compact-tools { display: flex; gap: 8px; position: absolute; z-index: 4; top: 119px; left: 12px; }
  .compact-tools button { color: #f4dfb8; background: #25292a; border: 1px solid #8b7850; border-radius: 6px; padding: 7px 11px; }
    .hand, .tool-settings { top: 158px; max-height: calc(100% - 275px); z-index: 4; }
  .hand { left: 12px; }
  .tool-settings { right: 12px; width: min(250px, calc(100% - 24px)); }
  .genesis { display: block; top: auto; bottom: 112px; left: 12px; font-size: 12px; }
  .genesis.library { top: auto; left: auto; right: 12px; }
  .genesis[open] { z-index: 5; }
  .library-body { width: min(300px, calc(100vw - 32px)); }
  .timeline { left: 8px; right: 8px; bottom: 12px; gap: 8px; flex-wrap: wrap; padding: 10px; }
  .scrub-wrap { min-width: 120px; flex: 1; }
  .pace { gap: 0; }
  .leap { gap: 0; }
  .battle-report { left: 12px; right: 12px; bottom: 162px; }
  .readout { left: 12px; right: 12px; bottom: 155px; }
}

/* Controls stay legible in native, hover, selected and disabled states. */
.map-panel { user-select: none; -webkit-user-select: none; }
.map-panel input, .map-panel textarea { user-select: text; -webkit-user-select: text; }
.map-panel button { color: #f4e6c9; background-color: #292e35; }
.map-panel button:hover:not(:disabled) { color: #fff4d8; background-color: #414953; }
.map-panel button:disabled { opacity: 1; color: #b6b1a7; background: #353a40; border-color: #62686e; cursor: not-allowed; }
.map-panel .gold-button, .map-panel .play, .map-panel .lenses button[aria-pressed="true"], .map-panel .pace button[aria-pressed="true"] { color: #241a0c; background: #e2c471; }
.map-panel .gold-button:disabled { color: #b6b1a7; background: #353a40; }
.map-panel button:focus-visible, .map-panel input:focus-visible, .map-panel select:focus-visible { outline: 2px solid #f9d273; outline-offset: 2px; }
.tool-settings select, .tool-settings input:not([type=checkbox]):not([type=range]) { color: #f6eace; background: #262d32; border: 1px solid #807252; border-radius: 4px; padding: 5px; }
.tool-settings select option { color: #f6eace; background: #262d32; }
.compact-tools { display: flex; flex-wrap: wrap; gap: 6px; position: absolute; z-index: 5; top: 108px; left: 18px; right: 18px; pointer-events: none; }
.compact-tools button, #quick-area { pointer-events: auto; }
.compact-tools button { border: 1px solid #8b7850; border-radius: 6px; padding: 6px 10px; font-size: 12px; }
.compact-tools button[aria-expanded="true"] { color: #241a0c; background: #e2c471; }
.hand, .tool-settings { top: 154px; max-height: calc(100% - 270px); z-index: 4; }
.hand { width: 174px; }
.tool-settings { width: min(280px, calc(100% - 24px)); }
.panel-close { float: right; min-width: 30px; min-height: 28px; padding: 0 6px !important; align-self: flex-end; }
.genesis { top: auto; bottom: 106px; left: 18px; }
.genesis.library { top: auto; bottom: 106px; left: auto; right: 18px; }
.genesis[open] { z-index: 6; }
.genesis[open] .genesis-body, .genesis[open] .library-body { max-height: 45vh; overflow: auto; }
#quick-area { flex-basis: auto; display: flex; align-items: center; gap: 7px; padding: 4px 7px; border: 1px solid #8b7850; border-radius: 6px; background: #171c24ee; font-size: 12px; max-width: 410px; }
#quick-area[hidden] { display: none; }
#quick-quote { flex: 1; }
.said, .battle-report { top: auto; bottom: 152px; left: 18px; right: auto; max-width: min(390px, calc(100% - 36px)); padding: 8px 38px 8px 12px; font-size: 12px; pointer-events: auto; }
.said:not(.show) { visibility: hidden; pointer-events: none; }
.said button, .battle-report button { position: absolute; top: 5px; right: 5px; border: 1px solid #8b7850; border-radius: 4px; }
#said-text, #battle-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.readout { left: 18px; bottom: 192px; max-width: min(320px, calc(100% - 36px)); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.readout:empty { display: none; }
.species-choices { display: flex; flex-wrap: wrap; gap: 5px; }
.species-choices button { flex: 1 0 30%; }
.species-choices button[aria-pressed="true"] { color: #241a0c; background: #e2c471; border-color: #fff1b6; }
.people-guide button { margin: 3px 3px 3px 0; }
@media (max-width: 900px) {
  .compact-tools { top: 119px; left: 12px; right: 12px; gap: 4px; }
  .compact-tools button { padding: 5px 7px; font-size: 11px; }
  .hand, .tool-settings { top: 160px; }
  .tool-settings { width: min(275px, calc(100% - 24px)); }
}

/* ------------------------------------------------------------ windows (2026-09-24) */
/* Every panel is a window: a title bar with minimise, maximise and close; a dock to open it again from. */
.win { display: flex; flex-direction: column; }
.win-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -13px -13px 9px; padding: 6px 8px 6px 12px; border-bottom: 1px solid rgba(214, 178, 96, 0.28); background: rgba(236, 208, 138, 0.08); border-radius: 10px 10px 0 0; cursor: default; user-select: none; }
.hand .win-bar { margin: -9px -8px 6px; }
.win-title { font-variant-caps: small-caps; letter-spacing: 0.14em; font-size: 12.5px; color: var(--gold-bright); }
.win-buttons { display: flex; gap: 3px; }
.win-button { min-width: 24px; height: 22px; padding: 0 6px !important; border: 1px solid rgba(214, 178, 96, 0.35) !important; border-radius: 5px !important; font-size: 13px; line-height: 1; background: rgba(8, 8, 12, 0.35) !important; color: #e9dcc0 !important; }
.win-button:hover { background: rgba(236, 208, 138, 0.18) !important; color: #fff4d8 !important; }
.win-closed { display: none !important; }
.win-min { max-height: none !important; overflow: hidden !important; height: 34px; padding-bottom: 0 !important; }
.win-min > :not(.win-bar) { display: none !important; }
.win-max { top: 8px !important; left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important; max-height: none !important; max-width: none !important; z-index: 40 !important; }
.win-max .hist-page { max-height: none; }
.map-panel > .win { position: absolute; }

.dock-row { position: absolute; z-index: 5; top: 108px; left: 18px; right: 18px; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; pointer-events: none; }
.dock { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.dock::-webkit-scrollbar { display: none; }
.dock-button { white-space: nowrap; }
.dock-row > * { pointer-events: auto; }
.dock { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 4px; border-radius: 10px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.dock-button { border: 1px solid transparent !important; border-radius: 7px !important; padding: 5px 10px !important; font-size: 12.5px; letter-spacing: 0.03em; background: none !important; color: #d9cdb2 !important; }
.dock-button:hover { background: rgba(236, 208, 138, 0.12) !important; color: #fff4d8 !important; }
.dock-button[aria-pressed="true"] { color: #241a0c !important; background: linear-gradient(180deg, var(--gold-bright), var(--gold)) !important; border-color: rgba(255, 236, 180, 0.6) !important; }
.dock-button.dock-min { opacity: 0.7; font-style: italic; }
.dock-clear { order: 99; font-style: italic; opacity: 0.85; }

/* Where each window sits when it is first opened. */
#hand-panel { left: 18px; top: 150px; }
#settings-panel { right: 14px; top: 150px; }
#people-panel { right: 14px; top: 150px; }
#history-panel { left: 200px; top: 150px; width: min(640px, calc(100% - 420px)); max-height: calc(100% - 270px); }
#workshop-panel { left: 200px; top: 150px; width: min(560px, calc(100% - 420px)); max-height: calc(100% - 270px); }
#library-panel { left: 200px; top: 150px; width: 360px; }
#genesis-panel { left: 200px; top: 150px; width: 300px; }
.library-win input[type=text], .library-win select, .genesis-win input, .genesis-win select { display: block; width: 100%; margin: 3px 0 8px; }
.library-win label, .genesis-win label { display: block; font-style: italic; color: #b7aa8c; }
.kept { display: flex; align-items: stretch; gap: 4px; width: 100%; border: 0; border-bottom: 1px solid rgba(214, 178, 96, 0.16); padding: 0; background: none; }
.kept-open { flex: 1; display: flex; align-items: baseline; gap: 8px; text-align: left; background: none !important; border: 0 !important; padding: 5px 2px !important; color: #efe5cc !important; font-size: 13.5px; }
.kept-open:hover { background: rgba(236, 208, 138, 0.1) !important; color: #fff !important; }
.kept-tab { align-self: center; font-size: 11.5px; font-style: italic; color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; padding: 0 4px; }
.kept-tab:hover { color: #fff4d8; }

.tool-hint { font-style: italic; color: #c0b69e; margin: -4px 0 8px; font-size: 11.5px; }
#act-controls label { display: block; }
#act-controls input[type=range] { display: block; width: 100%; }
#act-controls output, #trait-editor output { font-variant-numeric: lining-nums tabular-nums; color: var(--gold-bright); }
#act-controls small, #trait-editor small { display: block; font-size: 11px; color: #a89d85; font-style: italic; }
#trait-editor label { display: block; margin: 5px 0; }
#trait-editor input[type=range] { display: block; width: 100%; }
#worldwide-actions { margin: 6px 0; }
#worldwide-actions button { width: 100%; }

/* The history page: a book, read in the window. */
.history .hist-controls { flex: none; }
.history label { display: block; margin: 5px 0; }
.history input, .history select { display: block; width: 100%; margin-top: 3px; }
.hist-years-row input { display: inline-block; width: 42%; }
.hist-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.hist-buttons button[aria-pressed="true"] { color: #241a0c; background: #e2c471; }
.hist-preface { display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; font-size: 11.5px; }
.hist-preface input { display: inline-block; width: auto; margin: 0; }
.hist-page { flex: 1; min-height: 120px; overflow-y: auto; margin: 6px -13px -13px; padding: 12px 18px 18px; font-size: 14px; line-height: 1.55; color: var(--ink); background:
  radial-gradient(130% 80% at 30% 0%, #f8eedb 0%, var(--parchment) 45%, var(--parchment-2) 100%); border-top: 1px solid #5d4a2a; }
.hist-chapter { margin: 14px 0 6px; font-weight: 400; font-size: 16px; font-variant-caps: small-caps; letter-spacing: 0.12em; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.hist-chapter:first-child { margin-top: 0; }
.hist-number { color: var(--vermilion); font-size: 12px; letter-spacing: 0.16em; }
.hist-span { margin-left: auto; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); font-variant-caps: normal; font-style: italic; }
.hist-opening { font-style: italic; color: var(--ink-soft); margin: 4px 0 8px; }
.hist-p { margin: 0 0 9px; cursor: pointer; border-radius: 4px; padding: 2px 4px; }
.hist-p:hover { background: rgba(201, 162, 75, 0.14); }
.hist-p.hi { background: rgba(201, 162, 75, 0.3); box-shadow: inset 2px 0 0 var(--vermilion); }
.hist-years { display: inline-block; min-width: 3.5em; margin-right: 6px; font-size: 12px; color: var(--vermilion); font-variant-numeric: oldstyle-nums tabular-nums; }
.hist-p.v-claim { margin-left: 18px; color: #6d2a1b; font-style: italic; border-left: 2px solid rgba(180, 67, 44, 0.45); }
.hist-p.v-memory { margin-left: 18px; color: var(--lapis); font-style: italic; border-left: 2px solid rgba(70, 88, 154, 0.45); }
.hist-p.v-conclusion { color: var(--ink); background: rgba(255, 250, 235, 0.55); border: 1px solid var(--rule); cursor: default; }
.hist-p.v-conclusion:hover { background: rgba(255, 250, 235, 0.55); }
.hist-closing-title { margin: 8px 0 4px; font-weight: 400; font-size: 13px; font-variant-caps: small-caps; letter-spacing: 0.14em; color: var(--vermilion); }
.hist-page .empty { color: var(--ink-soft); }

/* The workshop. */
.workshop .tabs { display: flex; gap: 4px; margin: 0 0 8px; flex: none; }
.workshop .tabs button { flex: 1; padding: 5px 4px; font-size: 12px; }
.workshop .tabs button[aria-pressed="true"] { color: #241a0c; background: #e2c471; }
.workshop [data-pane] { overflow-y: auto; }
.setting { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(214, 178, 96, 0.16); }
.setting label { grid-column: 1 / -1; margin: 0; font-variant-numeric: tabular-nums; color: #f1dba4; }
.setting input[type=range] { width: 100%; margin: 0; }
.setting input[type=checkbox] { justify-self: start; }
.setting output { min-width: 3em; text-align: right; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.setting button { padding: 3px 8px !important; }
.setting small { grid-column: 1 / -1; font-size: 11px; color: #a89d85; font-style: italic; }
.form-card { border-bottom: 1px solid rgba(214, 178, 96, 0.16); padding: 5px 0; }
.form-card summary { cursor: pointer; }
.form-card summary em { font-style: italic; color: #a89d85; font-size: 11.5px; }
.form-card p { margin: 5px 0; }
.dials { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin: 6px 0; }
.dial { display: grid; grid-template-columns: 7.5em 1fr 2.2em; align-items: center; gap: 5px; font-size: 11px; }
.dial-name { color: #c0b69e; }
.dial-bar { height: 5px; background: rgba(8, 8, 12, 0.5); border-radius: 3px; overflow: hidden; }
.dial-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.dial-num { text-align: right; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
#charter-editor label { display: block; margin: 5px 0; }
#charter-editor input:not([type=checkbox]):not([type=range]) { display: block; width: 100%; }
#charter-dials label { display: grid; grid-template-columns: 7.5em 1fr 2.5em; align-items: center; gap: 6px; }
#charter-dials input { width: 100%; }
.checks { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.check { display: inline-flex !important; align-items: center; gap: 3px; margin: 0 !important; font-size: 11px; }
.realm-card { padding: 6px 0; border-bottom: 1px solid rgba(214, 178, 96, 0.16); }
.realm-card p { margin: 3px 0; }
.realm-head { display: flex; align-items: baseline; gap: 8px; }
.realm-head .chip { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); flex: none; align-self: center; }
.realm-head .count { margin-left: auto; font-size: 11.5px; font-style: italic; color: #a89d85; white-space: nowrap; }
.workshop .empty { color: #a89d85; font-style: italic; }

/* The herald: what just happened, said on the map as it happens. */
.herald { position: absolute; z-index: 3; left: 18px; bottom: 214px; max-width: min(460px, calc(100% - 36px)); padding: 8px 38px 8px 12px; font-size: 12.5px; color: #f6ecd2; background: rgba(24, 28, 42, 0.92); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); pointer-events: auto; }
.herald button { position: absolute; top: 5px; right: 5px; border: 1px solid #8b7850; border-radius: 4px; }
#herald-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.herald[hidden] { display: none; }
@media (max-width: 900px) {
  .dock-row { top: 119px; left: 12px; right: 12px; }
  #history-panel, #workshop-panel, #library-panel, #genesis-panel { left: 12px; width: calc(100% - 24px); }
  .herald { left: 12px; right: 12px; bottom: 200px; }
}

/* What clicking the map does now, said in the dock so it is never hidden behind a closed window. */
.act-chip { flex: 1 1 140px; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 10px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); font-size: 12.5px; font-style: italic; color: #efe5cc; max-width: min(520px, 100%); }
.act-chip button { border: 1px solid #8b7850 !important; border-radius: 7px !important; padding: 4px 9px !important; font-size: 12px; font-style: normal; }
.act-chip button[hidden] { display: none; }
#act-chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .lenses { flex-wrap: nowrap; max-width: calc(100% - 24px); } }

.chooser .chooser-rule { display: block; border-top: 1px solid rgba(214, 178, 96, 0.16); padding: 4px 0; }
.chooser .chooser-rule button { border-top: 0; }
.chooser .chooser-rule select { width: 100%; margin: 2px 0 4px; color: #f6eace; background: #262d32; border: 1px solid #807252; border-radius: 4px; padding: 4px; }

/* ------------------------------------------------------------ the pointer, notices, the age summary (2026-10-02) */
/* One notice at a time, centred under the dock, clear of the hand on the left and the windows on the right. */
.notice { position: absolute; z-index: 3; top: 152px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(460px, calc(100% - 520px)); min-width: 240px; padding: 8px 64px 8px 14px; font-size: 13px; color: #f6ecd2; background: rgba(24, 28, 42, 0.92); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); pointer-events: auto; }
.notice[hidden] { display: none; }
.notice button { position: absolute; top: 5px; border: 1px solid #8b7850; border-radius: 4px; padding: 1px 6px; font-size: 11.5px; }
#dismiss-notice { right: 5px; }
#notice-log-open { right: 30px; font-style: italic; }

/* What the pointer is over, right beside it, above everything else and never in its way. */
.hover-tag { position: fixed; z-index: 50; pointer-events: none; max-width: 320px; padding: 4px 9px; border-radius: 7px; font-size: 12.5px; color: #fff4d8; background: rgba(18, 16, 22, 0.9); border: 1px solid rgba(214, 178, 96, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hover-tag[hidden] { display: none; }

/* What the pointer was clicked on, in sentences: a page from the book, bottom right. */
.look-card { position: absolute; z-index: 45; right: 18px; bottom: 104px; width: min(360px, calc(100% - 36px)); max-height: 42%; overflow-y: auto; padding: 12px 16px; border-radius: 10px; color: var(--ink); background: radial-gradient(130% 80% at 30% 0%, #f8eedb 0%, var(--parchment) 45%, var(--parchment-2) 100%); border: 1px solid #5d4a2a; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); }
.look-card[hidden] { display: none; }
.look-card h3 { margin: 0 0 6px; font-weight: 400; font-size: 16px; font-variant-caps: small-caps; letter-spacing: 0.1em; color: var(--vermilion); }
.look-card p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.look-buttons { display: flex; gap: 6px; }
.look-card button { border: 1px solid #8b7850; border-radius: 5px; padding: 4px 10px; }

/* The notices, every one so far. */
#notices-panel { left: 200px; top: 150px; width: 380px; max-height: calc(100% - 270px); }
.notices-list { overflow-y: auto; }
.notices-list button { display: block; width: 100%; text-align: left; margin: 0; padding: 6px 4px !important; border: 0 !important; border-bottom: 1px solid rgba(214, 178, 96, 0.16) !important; border-radius: 0 !important; background: none !important; font-size: 12.5px; }
.notices-list button:hover { background: rgba(236, 208, 138, 0.1) !important; }
.notices-list .n-year { color: var(--gold-bright); margin-right: 6px; font-variant-numeric: tabular-nums; }
.notices-list .n-war::before, .notices-list .n-victory::before, .notices-list .n-people::before, .notices-list .n-extinction::before { display: inline-block; width: 1.2em; }
.notices-list .n-war::before { content: '⚔'; color: #f0a08a; }
.notices-list .n-victory::before { content: '⚑'; color: var(--gold-bright); }
.notices-list .n-people::before { content: '✦'; color: #9fd0a4; }
.notices-list .n-extinction::before { content: '✝'; color: #c0b69e; }
.notices-list .n-prayer::before { content: '☩'; color: var(--gold-bright); }

/* The people's crafts over time. */
.craft-timeline { margin: 4px 0; padding-left: 0; list-style: none; max-height: 220px; overflow-y: auto; font-size: 11.5px; }
.craft-timeline li { padding: 2px 0; border-bottom: 1px solid rgba(214, 178, 96, 0.1); }
.craft-timeline .gain { color: #f1dba4; }
.craft-timeline .loss { color: #f0a08a; }

/* The age summary: time stops, and a page of the chronicle is laid over the map. */
.summary { position: absolute; z-index: 60; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 6, 10, 0.55); }
.summary[hidden] { display: none; }
.summary-page { width: min(640px, calc(100% - 32px)); max-height: calc(100% - 80px); overflow-y: auto; padding: 22px 28px 18px; border-radius: 6px; color: var(--ink); background: radial-gradient(130% 80% at 30% 0%, #f8eedb 0%, var(--parchment) 45%, var(--parchment-2) 100%); border: 1px solid #5d4a2a; box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.45), 0 24px 60px rgba(0, 0, 0, 0.6); }
.summary-page h2 { margin: 0 0 10px; text-align: center; font-weight: 400; font-size: 21px; font-variant-caps: small-caps; letter-spacing: 0.14em; color: var(--vermilion); }
.summary-page h3 { margin: 14px 0 4px; font-weight: 400; font-size: 14px; font-variant-caps: small-caps; letter-spacing: 0.14em; color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.summary-page p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.summary-page p::first-letter { font-size: 1.9em; float: left; line-height: 0.9; margin: 3px 4px 0 0; color: var(--vermilion); }
.summary-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.summary-buttons button { border: 1px solid #8b7850; border-radius: 5px; padding: 6px 14px; }
#sound-settings { border-top: 1px solid #6d6248; padding-top: 9px; margin-top: 9px; }
.power-income { display: block; margin-top: 2px; font-size: 10.5px; font-style: italic; line-height: 1.3; color: #c0b69e; }
#sound-settings summary { cursor: pointer; color: #f1dba4; }
#sound-settings input[type=range] { display: block; width: 100%; }
@media (max-width: 900px) {
  .notice { top: auto; bottom: 200px; left: 12px; right: 12px; transform: none; width: auto; max-width: none; }
  .look-card { right: 12px; bottom: 150px; }
}
.act-chip.chip-armed { border-color: rgba(255, 236, 180, 0.7); box-shadow: 0 0 14px rgba(201, 162, 75, 0.35); }