/* 《第九条命》· 视觉规范
   规则：全画面冷色，只有猫是暖色 */

:root {
  --bg: #0f1a1c;
  --bg-2: #16282b;
  --ink: #e8e6e0;
  --ink-dim: #93a3a4;
  --line: rgba(232, 230, 224, 0.12);
  --warm: #d98a5a;          /* 唯一暖色：橘白猫 */
  --warm-soft: rgba(217, 138, 90, 0.14);
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --sans: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overscroll-behavior: none;
}

/* 纸纹：两层极淡的重复渐变 */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(63deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}

.app { position: relative; z-index: 1; min-height: 100vh; }

/* ---------- 屏幕切换 ---------- */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

/* ---------- 入口 ---------- */
#screen-entry {
  display: none; padding: 28px 20px 40px;
  background: radial-gradient(120% 60% at 50% 0%, #1b3034 0%, var(--bg) 62%);
}
#screen-entry.active { display: flex; align-items: center; justify-content: center; }

.entry-card {
  position: relative; width: 100%; max-width: 420px;
  padding: 28px 22px 24px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
.entry-stamp {
  position: absolute; top: 18px; right: 18px;
  padding: 3px 10px; font-size: 13px; letter-spacing: .18em;
  color: var(--warm); border: 1px solid var(--warm);
  border-radius: 3px; transform: rotate(-6deg); opacity: .85;
}
.entry-title { margin: 0 0 4px; font-family: var(--serif); font-size: 26px; letter-spacing: .06em; }
.entry-sub { margin: 0 0 22px; font-size: 12px; color: var(--ink-dim); letter-spacing: .12em; }

.entry-list { margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line); }
.entry-list > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.entry-list dt { color: var(--ink-dim); letter-spacing: .1em; flex: 0 0 auto; }
.entry-list dd { margin: 0; text-align: right; font-family: var(--serif); }
.entry-list dd.blank { color: var(--warm); letter-spacing: .3em; }

.entry-note { margin: 16px 0 0; font-size: 11px; color: var(--ink-dim); text-align: center; line-height: 1.7; }

button { font: inherit; cursor: pointer; border: 0; }
button.primary {
  width: 100%; padding: 14px; border-radius: 10px;
  background: var(--warm); color: #14201f; font-size: 16px;
  letter-spacing: .12em; transition: transform .15s, filter .15s;
}
button.primary:active { transform: scale(.98); filter: brightness(1.08); }
button.ghost {
  width: 100%; padding: 12px; margin-top: 10px;
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 10px; font-size: 13px;
}

/* ---------- 正片 ---------- */
.bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px 12px; font-size: 12px; color: var(--ink-dim);
  letter-spacing: .12em;
}
#ai-status.is-fallback { color: #c98a6a; }

.illustration {
  position: relative; margin: 0 18px;
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(80% 70% at 30% 20%, #24444a 0%, #16282b 55%, #101d20 100%);
  border: 1px solid var(--line);
}
.illustration::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(15,26,28,.55) 100%);
}
#illustration-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .5s ease;
}
#illustration-img.loaded { opacity: 1; }

.text-area { padding: 20px 22px 40px; }
.paragraph {
  margin: 0; font-family: var(--serif); font-size: 17px; line-height: 2.05;
  letter-spacing: .02em; color: #eae7e0; min-height: 3em; white-space: pre-wrap;
}
.paragraph.typing::after {
  content: "▌"; margin-left: 2px; color: var(--warm); animation: blink .9s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.choices { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.choices.hidden { display: none; }
.choice {
  padding: 15px 18px; text-align: left; border-radius: 10px;
  background: rgba(255,255,255,.04); color: var(--ink);
  border: 1px solid var(--line); font-size: 15px;
  transition: background .18s, border-color .18s, transform .12s;
  animation: rise .4s ease both;
}
.choice:nth-child(2) { animation-delay: .08s; }
.choice:nth-child(3) { animation-delay: .16s; }
.choice:active { transform: scale(.99); background: var(--warm-soft); border-color: var(--warm); }
.choice.locked {
  color: #5c6a6b; background: transparent; border-style: dashed; font-style: italic;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 结局 ---------- */
#screen-end { background: radial-gradient(120% 60% at 50% 0%, #1b3034 0%, var(--bg) 70%); }
.end-wrap { padding: 56px 22px 60px; max-width: 460px; margin: 0 auto; }
.end-kicker { margin: 0 0 8px; font-size: 12px; letter-spacing: .3em; color: var(--warm); }
.end-title { margin: 0; font-family: var(--serif); font-size: 34px; letter-spacing: .08em; }
.end-subtitle { margin: 6px 0 24px; font-size: 12px; color: var(--ink-dim); letter-spacing: .2em; }

.end-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 28px 0 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.end-stats.hidden { display: none; }
.end-stats > div { text-align: center; }
.end-stats span { display: block; font-size: 11px; color: var(--ink-dim); letter-spacing: .2em; }
.end-stats b { display: block; margin-top: 6px; font-family: var(--serif); font-size: 26px; color: var(--warm); }

.end-real {
  margin: 22px 0 26px; font-size: 13px; color: var(--ink-dim);
  line-height: 1.9; text-align: center; letter-spacing: .04em;
}
.end-actions { margin-bottom: 26px; }
.disclaimer {
  font-size: 11px; line-height: 1.9; color: #6f7f80; margin: 0;
  padding-top: 16px; border-top: 1px solid var(--line);
}

/* ---------- AI 显式标识：全程可见，字号按 1080p 短边 2.8% 上取 ---------- */
.ai-badge {
  position: fixed; right: 12px; bottom: 12px; z-index: 99;
  font-size: 22px; line-height: 1; letter-spacing: .06em;
  padding: 7px 11px; border-radius: 6px;
  color: #0f1a1c; background: rgba(255,255,255,.82);
  font-weight: 600; pointer-events: none;
}

@media (min-width: 520px) {
  .illustration { aspect-ratio: 16 / 9; }
}