:root {
  color-scheme: light;
  font-family:
    system-ui,
    -apple-system,
    "PingFang SC",
    sans-serif;
  background: #f4f0e6;
  color: #283e35;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  cursor: pointer;
}
a {
  color: inherit;
}
header,
main,
footer {
  width: min(1200px, 100% - 72px);
  margin: auto;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 12px;
  border-bottom: 1px solid #c5c9b8;
  gap: 20px;
}
.brand {
  text-decoration: none;
  font-family: Georgia, "Songti SC", serif;
  font-size: 26px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.brand span {
  display: block;
  font: 9px/1.8 system-ui;
  letter-spacing: 0.28em;
  color: #75806c;
}
#folio,
.text-button {
  font-size: 12px;
  color: #687765;
}
.text-button {
  border: 0;
  background: none;
  padding: 10px 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
nav {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #7c8474;
  padding: 14px 0 18px;
  letter-spacing: 0.04em;
}
nav .active {
  color: #a15536;
  font-weight: 700;
}
nav .past {
  color: #3d5c47;
}
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.scene-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 76px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #7a826d;
  margin: 0 0 10px;
}
.scene-heading h1 {
  font:
    500 29px/1.3 Georgia,
    "Songti SC",
    serif;
  margin: 0 0 14px;
}
.age {
  font:
    500 52px/1 Georgia,
    serif;
  color: #526d54;
  white-space: nowrap;
}
.age small {
  font: 13px system-ui;
  margin-inline-start: 5px;
}
figure {
  margin: 0;
  background: #dbe2ca;
  overflow: hidden;
  position: relative;
}
canvas {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 12/7;
  image-rendering: pixelated;
}
figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: #e6e6d7;
  padding: 11px 16px;
  font-size: 11px;
  color: #5d7059;
  min-height: 38px;
}
.life-status {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  padding: 20px 0 15px;
  gap: 12px;
  border-bottom: 1px solid #d4d7c6;
}
.life-status span {
  display: block;
  font-size: 10px;
  color: #7b826f;
  margin-bottom: 6px;
}
.life-status strong {
  font-size: 13px;
  font-weight: 500;
}
.meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 20px;
  padding: 13px 0;
}
.meters > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.meters span {
  white-space: nowrap;
  font-size: 10px;
  color: #6c7862;
}
.meters b {
  font-weight: 500;
}
meter {
  width: 100%;
  height: 5px;
  appearance: none;
  border: 0;
  background: #d5d9c6;
  border-radius: 0;
}
meter::-webkit-meter-bar {
  border: 0;
  border-radius: 0;
  background: #d5d9c6;
  height: 5px;
}
meter::-webkit-meter-optimum-value {
  background: #749273;
}
meter::-moz-meter-bar {
  background: #749273;
}
.meters p {
  grid-column: 1/-1;
  font-size: 10px;
  color: #7a806e;
  margin: 0;
}
.family-line {
  border-top: 1px solid #d4d7c6;
  padding: 13px 0;
}
.family-line > .eyebrow {
  display: block;
  font-size: 9px;
  margin-bottom: 9px;
}
#family {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
}
.person {
  font-size: 11px;
  line-height: 1.5;
}
.person em {
  font-style: normal;
  color: #8a8e7b;
  margin-inline-start: 4px;
}
.person .gone {
  color: #949784;
}
.story {
  padding-top: 5px;
}
h2 {
  font:
    500 clamp(24px, 2.5vw, 34px)/1.48 Georgia,
    "Songti SC",
    serif;
  letter-spacing: 0.02em;
  margin: 11px 0 18px;
}
p {
  line-height: 1.85;
}
#cover {
  padding-top: 37px;
}
#cover h2 {
  font-size: clamp(27px, 2.8vw, 36px);
}
.intro,
#context,
#outcome {
  font-size: 13px;
  color: #5f705e;
  line-height: 1.95;
}
#context {
  margin-bottom: 21px;
}
.primary {
  background: #315743;
  color: #faf6e9;
  border: 1px solid #315743;
  padding: 15px 19px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  text-align: left;
  font-size: 13px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.primary:hover {
  background: #234531;
  transform: translateY(-1px);
}
.hint {
  font-size: 10px;
  color: #858b79;
  line-height: 1.8;
}
.primary + .hint {
  margin-top: 15px;
}
#actions {
  display: grid;
  gap: 0;
}
#actions button {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 20px;
  gap: 6px 12px;
  padding: 14px 3px;
  border: 0;
  border-top: 1px solid #d1d5c1;
  color: #304f3c;
  background: transparent;
  transition:
    background 0.18s,
    padding 0.18s;
}
#actions button:last-child {
  border-bottom: 1px solid #d1d5c1;
}
#actions button:hover {
  padding-left: 12px;
  background: #e9ebde;
}
#actions .label {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 500;
}
#actions .arrow {
  font-size: 17px;
  grid-column: 2;
  grid-row: 1/3;
  color: #a16343;
  align-self: center;
}
#actions small {
  display: block;
  color: #7b826e;
  font-size: 10px;
  line-height: 1.7;
  grid-column: 1;
}
.story .eyebrow {
  color: #a16543;
  font-size: 10px;
}
#changes {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  border-top: 1px solid #d0d5c1;
}
#changes li {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 0;
  font-size: 12px;
  border-bottom: 1px solid #dce0cf;
}
#changes span {
  color: #7d846f;
}
#changes b {
  font-weight: 500;
  text-align: right;
  color: #426746;
}
#changes .down {
  color: #a26446;
}
#future {
  font-size: 11px;
  color: #73816a;
  line-height: 1.8;
  border-left: 2px solid #b9c3a5;
  padding-left: 13px;
  margin: 18px 0 24px;
}
#outcome {
  color: #425c48;
  font-size: 14px;
}
#progress-note {
  margin-top: 15px;
}
#error {
  color: #9e4d36;
  font-size: 12px;
}
#error:empty {
  display: none;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #a26543;
  outline-offset: 4px;
}
h2:focus {
  outline: none;
}
h2:focus-visible {
  outline: 2px solid #a26543;
  outline-offset: 6px;
}
#memories {
  margin: 25px 0 0;
}
details {
  border-top: 1px solid #ccd1bd;
}
summary {
  cursor: pointer;
  font-size: 12px;
  padding: 16px 0;
  line-height: 1.5;
}
#journal-details > summary {
  display: flex;
  justify-content: space-between;
}
#record-count {
  font-size: 10px;
  color: #89917d;
}
.memory-content {
  max-width: 850px;
  padding-bottom: 20px;
}
#skills {
  font-size: 12px;
  color: #698065;
  margin: 0 0 20px;
}
#journal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}
#journal li {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  font-size: 12px;
  line-height: 1.9;
  color: #5a705c;
}
#journal time {
  font: 18px Georgia;
  color: #8f9a81;
}
#journal small {
  font-size: 10px;
  color: #959a87;
}
#journal a {
  font-size: 10px;
  color: #9b7354;
  margin-inline-start: 7px;
}
#life-summary {
  font-size: 12px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  margin: 22px 0;
}
#life-summary dt {
  color: #89917e;
}
.scene-toggle {
  display: none;
}
#life-summary dd {
  margin: 0;
  line-height: 1.7;
}
#epilogue {
  font-size: 13px;
  color: #5c715d;
}
footer {
  border-top: 1px solid #c5c9b8;
  margin-top: 30px;
  padding: 20px 0 30px;
  color: #8c927f;
  font-size: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
footer details {
  border: 0;
}
footer summary {
  font-size: 10px;
  padding: 0;
  text-align: right;
}
footer p {
  font-size: 11px;
}
#book,
#result {
  animation: turn-page 0.35s ease-out;
}
@keyframes turn-page {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
[hidden] {
  display: none !important;
}
@media (min-width: 1600px) {
  main {
    padding-top: 20px;
  }
  .scene-heading {
    min-height: 112px;
  }
}
@media (max-width: 760px) {
  header,
  main,
  footer {
    width: calc(100% - 36px);
  }
  header {
    padding: 17px 0 14px;
  }
  .brand {
    font-size: 23px;
  }
  .brand span {
    font-size: 8px;
  }
  #folio {
    display: none;
  }
  nav {
    font-size: 9px;
    padding: 17px 0 15px;
    gap: 5px;
    letter-spacing: 0;
  }
  .workspace {
    grid-template-columns: 1fr;
    gap: 19px;
  }
  .scene-heading {
    min-height: 65px;
  }
  .scene-heading h1 {
    font-size: 24px;
    margin: 0 0 9px;
  }
  .scene-heading .eyebrow {
    font-size: 9px;
    margin-bottom: 4px;
  }
  .age {
    font-size: 38px;
  }
  figure {
    max-height: none;
  }
  canvas {
    aspect-ratio: 12/6.3;
    object-fit: cover;
  }
  figcaption {
    font-size: 10px;
    padding: 8px 10px;
  }
  .life-status {
    padding: 13px 0 11px;
  }
  .life-status strong {
    font-size: 12px;
  }
  .meters {
    padding: 10px 0;
  }
  .family-line {
    padding: 10px 0;
  }
  .person {
    font-size: 10px;
  }
  .story {
    padding: 0 0 10px;
  }
  h2 {
    font-size: 25px;
    margin: 7px 0 13px;
  }
  .story .eyebrow {
    margin-bottom: 5px;
  }
  #context {
    font-size: 12px;
    margin-bottom: 14px;
  }
  #actions button {
    padding: 13px 2px;
  }
  #actions .label {
    font-size: 13px;
  }
  #cover {
    padding-top: 0;
  }
  #cover h2 {
    font-size: 28px;
  }
  .intro {
    font-size: 12px;
  }
  #memories {
    margin-top: 10px;
  }
  footer {
    display: block;
    margin-top: 20px;
  }
  footer details {
    margin-top: 16px;
  }
  footer summary {
    text-align: left;
  }
  #journal li {
    grid-template-columns: 45px 1fr;
    font-size: 11px;
  }
  #changes {
    margin: 14px 0;
  }
  #future {
    margin: 14px 0 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

#between {
  border-left: 2px solid #bcc8a8;
  padding: 0 0 0 13px;
  margin: 0 0 20px;
}
#between p {
  font-size: 11px;
  color: #6c7d61;
  line-height: 1.8;
  margin: 6px 0;
}

#mobile-summary {
  display: none;
}
h2:focus-visible {
  outline: none;
}
@media (max-width: 760px) {
  .world {
    display: contents;
  }
  .scene-heading {
    order: 0;
    position: relative;
    padding-bottom: 19px;
  }
  figure {
    order: 1;
  }
  .story {
    order: 2;
  }
  #dashboard {
    order: 3;
    margin-top: 8px;
    border-top: 1px solid #c5c9b8;
  }
  #mobile-summary {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    font-size: 10px;
    color: #79836e;
  }
  .workspace {
    gap: 13px;
  }
}
@media (max-width: 760px) {
  #continue {
    position: fixed;
    bottom: 12px;
    left: 18px;
    width: calc(100% - 36px);
    z-index: 2;
    box-shadow: 0 3px 18px #233c3520;
  }
  body:has(#continue:not([hidden])) {
    padding-bottom: 75px;
  }
}
/* The same game keeps its layout in longer languages and right-to-left scripts. */
header .brand {
  order: 0;
}
header #folio {
  order: 1;
  margin-inline: auto;
}
header #soundless {
  order: 2;
}
.language-switch {
  order: 3;
}
.language-switch select {
  font: inherit;
  font-size: 12px;
  border: 1px solid #bdc8b5;
  color: #3e5b43;
  background: #f4f0e6;
  padding: 9px 25px 9px 10px;
  max-width: 155px;
  cursor: pointer;
}
.brand > span[data-i18n] {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
#chapters {
  gap: 14px;
  align-items: flex-start;
}
#chapters > span {
  min-width: 0;
}
.story {
  min-width: 0;
}
.primary,
#actions button {
  text-align: start;
  overflow-wrap: anywhere;
}
#actions .arrow {
  grid-column: 2;
}
[dir="rtl"] #future,
[dir="rtl"] #between {
  border-left: 0;
  border-right: 2px solid #bcc8a8;
  padding-left: 0;
  padding-right: 13px;
}
[dir="rtl"] .primary > span:not([data-i18n]):not(#continue-label),
[dir="rtl"] #actions .arrow {
  transform: scaleX(-1);
}
[dir="rtl"] #changes b {
  text-align: left;
}
[dir="rtl"] #mobile-summary {
  left: auto;
  right: 0;
}
[dir="rtl"] footer summary {
  text-align: left;
}
#changes b,
.person,
#age {
  unicode-bidi: plaintext;
}
@media (max-width: 760px) {
  header {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .language-switch {
    margin-inline-start: auto;
  }
  .language-switch select {
    max-width: 125px;
    min-height: 42px;
    font-size: 11px;
  }
  header #soundless {
    display: none;
  }
  #chapters {
    gap: 8px;
    font-size: 9px;
  }
  #chapters > span {
    flex: 1;
    overflow-wrap: anywhere;
  }
  #family {
    line-height: 1.7;
  }
  [dir="rtl"] footer summary {
    text-align: right;
  }
}

@media (max-width: 760px) {
  .brand {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.language-switch select {
  padding-inline: 10px 25px;
}

.language-links nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-block: 16px;
}

footer #about {
  grid-column: 1 / -1;
}

.support-links {
  grid-column: 1 / -1;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 0;
}
.support-links a {
  padding-block: 12px;
  min-height: 48px;
}
.guide {
  max-width: 800px;
  font-size: 16px;
  line-height: 1.8;
}
.guide h1 {
  font:
    44px/1.2 Georgia,
    "Songti SC",
    serif;
  margin-block: 24px;
  text-wrap: balance;
}
.guide h2 {
  font-size: 24px;
  margin-block: 30px 10px;
}
.guide-intro {
  font-size: 19px;
}
.guide-updated {
  font-size: 12px;
  color: #5e675c;
}
.guide nav {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
}
.guide nav a,
.guide-page header > a:last-child,
.play-link {
  display: inline-block;
  padding-block: 12px;
  min-height: 48px;
}
.guide-preview {
  margin: 28px 0;
}
.guide-preview img {
  display: block;
  width: 100%;
  height: auto;
}
.guide-preview figcaption {
  display: block;
  padding-inline: 0;
  font-size: 13px;
}

.scene-toggle {
  display: none;
}
#life-summary dd {
  white-space: pre-line;
}
#book {
  scroll-margin-top: 18px;
}
@media (max-width: 760px) {
  body[data-reading="story"] .world figure {
    max-height: 165px;
    overflow: hidden;
  }
  body[data-reading="story"] #scene {
    height: 118px;
    object-fit: cover;
    object-position: center 75%;
  }
  body[data-reading="story"][data-scene-open="true"] .world figure {
    max-height: none;
  }
  body[data-reading="story"][data-scene-open="true"] #scene {
    height: auto;
  }
  body[data-reading="story"] .scene-toggle {
    display: block;
    min-height: 44px;
    margin: 0;
  }
  body[data-reading="story"] #chapters {
    padding-block: 8px;
  }
  body[data-reading="story"] .scene-heading {
    padding-bottom: 16px;
  }
  #continue {
    position: static;
    width: 100%;
    margin-top: 18px;
    box-shadow: none;
  }
  #actions .label {
    font-size: 15px;
  }
  #actions small,
  #context {
    font-size: 13px;
  }
  body:has(#continue:not([hidden])) {
    padding-bottom: 0;
  }
}
.guide-related,
.guide-languages {
  border-top: 1px solid #c5c9b8;
}
.guide-page .brand {
  font-size: clamp(17px, 4vw, 26px);
  white-space: normal;
}
@media (max-width: 760px) {
  .guide h1 {
    font-size: 32px;
  }
}

#archive { margin: 1.5rem auto; max-width: 68rem; padding: 0 1rem; }
#archive summary { cursor: pointer; padding: .7rem 0; }
#past-lives { padding-inline-start: 1rem; }
#past-lives li { padding: .4rem; line-height: 1.6; }

#scene-stage { position: relative; }
#atlas-map { position:absolute; inset:0; width:100%; height:100%; z-index:1; image-rendering:auto; }
#atlas-map[hidden], #atlas-replay[hidden], #period-panel[hidden], #era-health[hidden] { display:none; }
body[data-atlas="cover"] #atlas-map { cursor:crosshair; }
.atlas-button { display:none; position:absolute; z-index:2; bottom:12px; inset-inline-end:12px; border:1px solid #77897c; border-radius:3px; background:#fff9ed; color:#294b40; padding:9px 15px; }
body[data-atlas="open"] .atlas-button { display:block; }
body[data-atlas="open"] .world figure { max-height:none; }
body[data-atlas="open"] #scene { height:auto; }
#atlas-replay { min-height:40px; }
#choose-place { width:100%; margin:16px 0 10px; padding:12px; display:flex; align-items:center; gap:8px; background:#faf6e9; border:1px solid #b2bbac; color:#314a3b; }
#selected-place { margin-inline-start:auto; }
#picker-dialog { width:min(360px,85vw); padding:22px; color:#314a3b; background:#f5f1e5; border:1px solid #a7b29e; }
#picker-dialog::backdrop { background:#182e29aa; }
#birth-region { display:block; width:100%; padding:10px 12px; color:#274935; background:#f8f4e9; border:1px solid #b2bbac; font:inherit; margin-bottom:10px; }
#period-panel { margin:16px 0; border-block:1px solid #b7bfac; }
#period-panel summary { min-height:44px; padding:12px 0; cursor:pointer; }
#period-stamp { margin-inline-start:1em; font-weight:500; }
#period-body p { display:flex; justify-content:space-between; gap:12px; margin:7px 0; font-size:13px; }
#period-body { padding:0 4px 12px; }
#era-health { padding-block:8px; font-size:13px; }
#era-health meter { margin-inline-start:12px; max-width:35%; }
#family details { min-width:70px; }
#family summary { min-height:40px; cursor:pointer; }
#family .person p { font-size:12px; margin:3px 0 8px; }
#origin-dialog { max-width:min(420px,90vw); background:#f5f1e5; color:#314a3b; border:1px solid #a7b29e; padding:24px; }
#origin-dialog::backdrop { background:#182e29aa; }
#origin-dialog select { margin:10px 0; width:100%; padding:10px; font:inherit; }

#atlas-map { transition:opacity .36s ease; }
body[data-atlas="arrived"] #atlas-map { opacity:0; pointer-events:none; }
#period-year { width:100%; accent-color:#3f654f; margin:5px 0; }
@media (prefers-reduced-motion:reduce) { #atlas-map { transition:none; } }

@media (max-width:760px) {
  body[data-local-chapter="true"] .world figure { max-height:none; }
  body[data-local-chapter="true"] #scene { height:auto; }
}