/* Theme tokens, sky, page switching and shared bits (buttons, keycaps, gold rule). */
:root {
  --cjk: 'Noto Serif SC';
  --navy-0: #0b1433;
  --navy-1: #13214a;
  --navy-2: #1d2f62;
  --ink: #1d2a52;
  --gold: #e6c675;
  --gold-deep: #c9a24c;
  --cream: #f6efdc;
  --parchment: #efe3c4;
  --parchment-dark: #d9c79c;
  --text-dim: rgba(246, 239, 220, .72);
  --panel: rgba(18, 16, 30, .82);
  --panel-border: rgba(230, 198, 117, .55);
  --serif: 'Cormorant Garamond', var(--cjk), 'Songti SC', Georgia, serif;
  --sans: 'Source Sans 3', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

/* The CJK face follows the language of the text it is set in (a translation line carries its own lang): Simplified,
   Traditional (Taiwan), Japanese and Korean each have their own glyph shapes. --serif is restated with it, since a
   custom property's var() is resolved where it is declared. */
:lang(zh) { --cjk: 'Noto Serif SC'; }
:lang(zh-Hant), :lang(zh-TW) { --cjk: 'Noto Serif TC'; }
:lang(ja) { --cjk: 'Noto Serif JP'; }
:lang(ko) { --cjk: 'Noto Serif KR'; }
:lang(zh), :lang(ja), :lang(ko), :lang(en) { --serif: 'Cormorant Garamond', var(--cjk), 'Songti SC', Georgia, serif; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--navy-0) url('../art/bg-night-watercolor.jpg') center / cover no-repeat;
  color: var(--cream);
  font-family: var(--serif);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
/* 显示翻译 off: every translation line steps out of sight (keeping its place) until Tab is held (js/i18n.js) */
body.tr-off:not(.tr-peek) .tr-line { visibility: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* A few quiet twinkles over the painted night sky. */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sky .dot { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .7; animation: twinkle 5s ease-in-out var(--d) infinite; }
.sky .spark { position: absolute; font-size: var(--s); color: var(--gold); font-style: normal; line-height: 1; text-shadow: 0 0 8px rgba(230, 198, 117, .7); animation: twinkle 7s ease-in-out var(--d) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .55; } 50% { opacity: .15; } }

/* Pages: exactly one is visible, chosen by body[data-page]. */
.page { position: fixed; inset: 0; z-index: 2; display: none; opacity: 0; }
body[data-page="title"] #page-title,
body[data-page="map"] #page-map,
body[data-page="prologue"] #page-prologue,
body[data-page="chapter"] #page-chapter,
body[data-page="journal"] #page-journal { display: block; animation: page-in .7s var(--ease) forwards; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

#stage { position: fixed; inset: 0; z-index: 1; visibility: hidden; }   /* laid out (sized) even while hidden: the engine needs a canvas with a size to start */
#stage canvas { width: 100%; height: 100%; display: block; outline: none; }
body[data-page="game"] #stage { visibility: visible; }
body[data-page="game"] .sky { display: none; }

kbd {
  display: inline-block; min-width: 1.9em; padding: .12em .5em; border-radius: 6px;
  border: 1px solid rgba(246, 239, 220, .7); font-family: var(--sans); font-size: .82em; font-weight: 600;
  text-align: center; line-height: 1.5; background: rgba(0, 0, 0, .25);
}

.rule { display: flex; align-items: center; gap: .6em; color: var(--gold); margin: .7em 0; }
.rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.rule i { font-style: normal; font-size: .9em; }
.rule.left span { background: linear-gradient(90deg, var(--gold), rgba(230, 198, 117, .2)); flex: 0 0 9em; }

.btn {
  padding: .5em 1.2em; border-radius: 999px; border: 1px solid rgba(246, 239, 220, .35);
  font-family: var(--serif); font-size: 1.05rem; transition: background .2s, border-color .2s;
}
.btn:hover { border-color: var(--gold); background: rgba(230, 198, 117, .08); }
.btn.gold { border-color: var(--gold); color: var(--gold); }
.btn.danger { border-color: rgba(220, 120, 110, .6); color: #f0b0a8; }
.link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-size: .9em; }

.fatal { position: fixed; inset: auto 0 40% 0; text-align: center; z-index: 99; }