/* ============================================================
 * Legacy · 陳光宇 2083 · 三代傳承
 * 風格：IDE terminal · 極簡 · code review 質感
 * 主色：#047857 emerald (林家) · #f5f0e8 paper · #1a1815 ink
 * ============================================================ */

:root {
  --paper: #f5f0e8;
  --paper-deep: #ebe4d3;
  --ink: #1a1815;
  --ink-soft: #4a4638;
  --ink-faint: #6d6659;
  --moss: #047857;
  --moss-light: #10b981;
  --amber: #ca8a04;
  --red: #b91c1c;
  --code-bg: #1a1815;
  --code-fg: #e8e0d0;
  --code-green: #86efac;
  --code-red: #fca5a5;
  --code-comment: #78716c;
  --rule: rgba(26, 24, 21, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans TC", -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior: none;
}
#app { min-height: 100vh; }

/* ==================== Menu ==================== */
.menu-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
}
.menu-inner {
  max-width: 480px; width: 100%; text-align: center;
}
.menu-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.25em;
  color: var(--moss); margin-bottom: 20px; text-transform: uppercase;
}
.menu-title {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(60px, 14vw, 100px);
  line-height: 0.9; margin-bottom: 12px;
  color: var(--ink);
}
.menu-title-em { color: var(--moss); font-style: italic; }
.menu-tagline {
  color: var(--ink-soft);
  font-size: 15px; line-height: 1.85;
  margin: 20px auto 24px; max-width: 320px;
}
.menu-tagline em { color: var(--moss); font-style: italic; font-weight: 700; }
.menu-meta {
  color: var(--ink-faint);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.1em;
  margin-bottom: 32px;
}
.menu-btns {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 300px; margin: 0 auto 24px;
}
.btn-primary, .btn-secondary, .btn-ghost {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 700; font-size: 15px;
  padding: 14px 20px; border-radius: 4px;
  cursor: pointer; transition: all 0.15s;
}
.btn-primary {
  background: var(--moss); color: white; border: none;
  box-shadow: 0 4px 20px rgba(4, 120, 87, 0.3);
}
.btn-primary:hover, .btn-primary:active {
  background: var(--moss-light); transform: translateY(-1px);
}
.btn-secondary {
  background: transparent; color: var(--moss);
  border: 1px solid var(--moss);
}
.btn-secondary:hover { background: rgba(4, 120, 87, 0.08); }
.btn-ghost {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--rule); font-size: 13px; padding: 10px 16px;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-soft); }
.menu-foot {
  color: var(--ink-faint); font-size: 11px;
  font-family: "JetBrains Mono", monospace; letter-spacing: 0.1em;
}
.menu-foot a { color: var(--moss); text-decoration: none; }

/* ==================== How / Endings ==================== */
.how-screen {
  min-height: 100vh; padding: 20px;
  max-width: 640px; margin: 0 auto;
}
.btn-close {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--rule); padding: 8px 14px;
  border-radius: 4px; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  margin-bottom: 24px;
}
.btn-close:hover { color: var(--moss); }
.how-inner h2 { font-family: "Fraunces", serif; font-weight: 900; font-size: 32px; margin-bottom: 20px; }
.how-list { padding-left: 24px; color: var(--ink-soft); line-height: 1.9; font-size: 14px; }
.how-list li { margin-bottom: 8px; }
.how-list strong { color: var(--ink); }
.how-tip {
  margin-top: 24px; padding: 16px 20px;
  background: var(--paper-deep); border-left: 3px solid var(--moss);
  border-radius: 4px; color: var(--ink-soft); font-size: 13px; line-height: 1.8;
}
.how-tip strong { color: var(--moss); }
.endings-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  margin-top: 12px;
}
.ending-item {
  padding: 16px; background: var(--paper-deep);
  border: 1px solid var(--rule); border-radius: 6px;
}
.ending-item.locked { opacity: 0.35; }
.ending-item strong { display: block; color: var(--ink); margin-bottom: 6px; }
.ending-item .cond {
  font-family: "JetBrains Mono", monospace;
  color: var(--ink-faint); font-size: 11px; margin-top: 4px;
}

/* ==================== Act intro / outro ==================== */
.act-intro, .act-outro {
  min-height: 100vh; min-height: 100dvh;
  padding: 40px 24px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  max-width: 640px; margin: 0 auto;
  text-align: center;
}
.act-number {
  font-family: "JetBrains Mono", monospace;
  color: var(--moss); font-size: 12px;
  letter-spacing: 0.3em; margin-bottom: 12px;
}
.act-name {
  font-family: "Fraunces", serif; font-weight: 900;
  font-size: clamp(36px, 8vw, 56px);
  margin-bottom: 8px;
}
.act-age {
  font-family: "JetBrains Mono", monospace;
  color: var(--ink-soft); font-size: 14px;
  letter-spacing: 0.15em; margin-bottom: 4px;
}
.act-period {
  color: var(--ink-faint); font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em; margin-bottom: 30px;
}
.act-body {
  color: var(--ink); font-size: 15px; line-height: 1.95;
  font-family: "Noto Sans TC", serif;
  max-width: 560px; margin: 0 auto 32px;
  white-space: pre-wrap;
  text-align: left;
}
.ao-eyebrow {
  font-family: "JetBrains Mono", monospace;
  color: var(--moss); font-size: 11px; letter-spacing: 0.3em;
  margin-bottom: 20px;
}
.ao-body {
  color: var(--ink); font-size: 15px; line-height: 1.95;
  font-family: "Noto Sans TC", serif;
  max-width: 560px; margin: 0 auto 32px;
  white-space: pre-wrap;
  text-align: left;
}

/* ==================== Commit screen ==================== */
.commit-screen {
  min-height: 100vh;
  padding: 0 0 40px;
  max-width: 720px; margin: 0 auto;
}
.c-hud {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.12em;
}
.c-hud-left span, .c-hud-mid span, .c-hud-right span {
  color: var(--ink-soft); margin-right: 12px;
}
.c-hud-left span:first-child { color: var(--moss); font-weight: 700; }
.btn-icon {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent;
  color: var(--ink-soft); cursor: pointer; font-size: 14px;
}
.btn-icon:hover { color: var(--moss); border-color: var(--moss); }

.c-day {
  padding: 24px 20px 4px;
  font-family: "JetBrains Mono", monospace;
  color: var(--moss); font-size: 13px;
  letter-spacing: 0.15em;
}
.c-context {
  padding: 4px 20px 20px;
  color: var(--ink); font-size: 15px;
  line-height: 1.85; font-family: "Noto Sans TC", serif;
  white-space: pre-wrap;
}

.c-code {
  margin: 0 20px 20px;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--rule);
}
.code-label {
  background: var(--code-bg); color: var(--ink-faint);
  padding: 8px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.code-label-after { color: var(--code-green); }
.c-code pre {
  background: var(--code-bg); color: var(--code-fg);
  padding: 14px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px; line-height: 1.75;
  overflow-x: auto;
  white-space: pre;
}
/* code diff coloring */
.c-code pre .cmt { color: var(--code-comment); font-style: italic; }
.c-code pre .kw { color: var(--code-green); }

.c-options {
  padding: 0 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.c-option {
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 6px; cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-family: "Noto Sans TC", sans-serif;
  color: var(--ink); font-size: 14px;
  line-height: 1.6;
}
.c-option:hover, .c-option:active {
  border-color: var(--moss);
  background: rgba(4, 120, 87, 0.04);
}
.c-option-label {
  font-family: "JetBrains Mono", monospace;
  color: var(--code-green);
  background: var(--code-bg);
  padding: 6px 10px; border-radius: 3px;
  display: inline-block; margin-bottom: 6px;
  font-size: 12px;
}
.c-option-note { color: var(--ink-faint); font-size: 12px; margin-top: 4px; }

.c-stats {
  padding: 20px 20px 0;
  display: flex; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); margin-top: 20px;
}
.c-stat {
  flex: 1 1 100px;
  padding: 8px 12px;
  background: var(--paper-deep); border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
.c-stat .stat-label { color: var(--ink-faint); }
.c-stat .stat-val { color: var(--moss); font-weight: 700; font-size: 14px; }
.c-stat .stat-val.pos { color: var(--moss); }
.c-stat .stat-val.neg { color: var(--red); }

/* ==================== After choice ==================== */
.after-choice {
  min-height: 100vh;
  padding: 40px 20px;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column;
  justify-content: center;
}
.ac-note {
  color: var(--ink); font-size: 15px;
  line-height: 1.85; margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--paper-deep);
  border-left: 3px solid var(--moss);
  border-radius: 4px;
  font-family: "Noto Sans TC", serif;
}
.ac-delta {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; margin-bottom: 24px;
}
.ac-delta span {
  font-family: "JetBrains Mono", monospace;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; background: var(--paper-deep);
}
.ac-delta .pos { color: var(--moss); }
.ac-delta .neg { color: var(--red); }

/* ==================== Ending ==================== */
.ending-screen {
  min-height: 100vh; min-height: 100dvh;
  padding: 40px 24px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  max-width: 620px; margin: 0 auto;
  text-align: center;
}
.ending-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--moss); margin-bottom: 16px;
}
.ending-title {
  font-family: "Fraunces", serif; font-weight: 900;
  font-size: clamp(32px, 7vw, 48px);
  margin-bottom: 20px; color: var(--ink);
}
.ending-stats {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--ink-soft);
}
.ending-stats span { padding: 4px 10px; background: var(--paper-deep); border-radius: 999px; }
.ending-text {
  color: var(--ink); font-size: 15px; line-height: 1.95;
  font-family: "Noto Sans TC", serif;
  margin: 20px 0 30px; white-space: pre-wrap;
  text-align: left; max-width: 560px;
}
.end-btns {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 280px;
}

/* Dark mode friendly reversal */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16181c;
    --paper-deep: #1e2126;
    --ink: #e8e6df;
    --ink-soft: #a8a4a0;
    --ink-faint: #6d6a68;
    --rule: rgba(255, 255, 255, 0.1);
  }
  :root:not([data-theme="light"]) .c-option { background: var(--paper-deep); }
}


/* DLC 引導。放在結局文字下面、按鈕上面 ——
   玩家看完結局的情緒還在，那是唯一會想「還有嗎」的一刻。 */
.dlc-teaser {
  margin: 22px auto 0; max-width: 520px; text-align: left;
  border: 1px solid rgba(75,191,138,.4); border-left: 3px solid #4bbf8a;
  border-radius: 8px; padding: 16px 18px; background: rgba(75,191,138,.06);
}
.dlc-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em;
  color: #4bbf8a; margin-bottom: 8px;
}
.dlc-teaser p { font-size: 14px; line-height: 1.8; margin: 0 0 12px; }
.dlc-go {
  display: inline-block; font-size: 14px; font-weight: 700;
  color: #4bbf8a; text-decoration: none;
}
.dlc-go:hover { text-decoration: underline; }