@font-face {
  font-family: "WenKai";
  src: url("../assets/fonts/wenkai.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink: #241e18;
  --ink-2: #5a4f43;
  --paper: #f3ead8;
  --paper-2: #e7dbc2;
  --paper-edge: #b9a57f;
  --zhu: #a3312a;
  --zhu-2: #c2463a;
  --lv: #3f6e55;
  --gold: #b08a4a;
  --night: #14110d;
  --fs: 4.5cqw;
  --font: "WenKai", "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--night); color: var(--ink);
  font-family: var(--font); overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; cursor: pointer; }

/* 9:16 画框：手机上铺满，桌面上居中 */
#app {
  position: relative; margin: 0 auto; overflow: hidden;
  height: 100vh; height: 100dvh;
  width: min(100vw, calc(100dvh * 9 / 16));
  container-type: size;
  background: #000;
  box-shadow: 0 0 60px rgba(0,0,0,.6);
}

/* ---------- 舞台 ---------- */
#stage { position: absolute; inset: 0; overflow: hidden; }
.bg {
  position: absolute; inset: -2%; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease;
  animation: drift 40s ease-in-out infinite alternate;
}
.bg.on { opacity: 1; }
@keyframes drift { from { transform: scale(1.02) translate(0,0); } to { transform: scale(1.08) translate(-1%, -1%); } }
#stage::after { /* 上下压暗，保证 HUD 与文字可读 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 14%, rgba(10,8,6,0) 55%, rgba(10,8,6,.55) 100%);
}
#stage.shake { animation: shake .6s linear 2; }
@keyframes shake {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-1.2%, .6%); }
  40% { transform: translate(1%, -.8%); } 60% { transform: translate(-.8%, -.4%); } 80% { transform: translate(.8%, .8%); }
}
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

#rain { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.5s;
  background-image:
    repeating-linear-gradient(105deg, rgba(220,230,240,.0) 0 7px, rgba(220,230,240,.22) 7px 8px, rgba(220,230,240,0) 8px 23px),
    repeating-linear-gradient(100deg, rgba(220,230,240,.0) 0 11px, rgba(220,230,240,.14) 11px 12px, rgba(220,230,240,0) 12px 37px);
  background-size: 120px 220px, 170px 300px;
  animation: rain .45s linear infinite;
}
#rain.on { opacity: 1; }
@keyframes rain { to { background-position: -40px 220px, -60px 300px; } }

/* 立绘 */
#chars { position: absolute; inset: 0; pointer-events: none; }
.char {
  position: absolute; bottom: 27%; height: 58%; width: auto; left: 50%;
  transform: translateX(-50%) translateY(3%); opacity: 0;
  transition: opacity .45s ease, transform .45s ease, filter .35s ease, left .45s ease;
  filter: drop-shadow(0 1cqw 2cqw rgba(0,0,0,.45));
}
.char.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.char.dim { filter: brightness(.55) saturate(.7) drop-shadow(0 1cqw 2cqw rgba(0,0,0,.45)); }
.char.pos-l { left: 30%; } .char.pos-r { left: 70%; } .char.pos-c { left: 50%; }
.char.front { z-index: 2; } .char.back { z-index: 1; }
body.choosing .char { filter: brightness(.45) saturate(.6); }

/* ---------- HUD ---------- */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: calc(env(safe-area-inset-top) + 2.2cqw) 3.2cqw 0;
  color: #efe6d2; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  transition: opacity .4s;
}
#where { font-size: 3.3cqw; letter-spacing: .1em; opacity: .9; min-height: 4.4cqw; }
#hud-row { display: flex; align-items: center; gap: 2cqw; margin-top: 1.4cqw; }
.meter {
  display: flex; align-items: center; gap: 1.4cqw; background: rgba(20,16,12,.55);
  border: 1px solid rgba(239,230,210,.25); border-radius: 99px; padding: .8cqw 2.4cqw .8cqw .8cqw;
  font-size: 3.4cqw;
}
.meter .seal {
  display: inline-grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 1.2cqw;
  background: var(--zhu); color: #f8efe0; font-size: 3.8cqw; text-shadow: none;
}
.meter .bar { width: 20cqw; height: 1.6cqw; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.meter .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d08a3a, #c2463a 60%, #ff4a3a); transition: width .8s ease; }
.meter b { font-weight: normal; min-width: 5cqw; text-align: right; }
.meter.hot { animation: hot 1.2s ease-in-out infinite; border-color: rgba(255,90,70,.7); }
@keyframes hot { 50% { box-shadow: 0 0 3cqw rgba(255,60,40,.6); } }
.chip { font-size: 3.4cqw; background: rgba(20,16,12,.55); border: 1px solid rgba(239,230,210,.25); border-radius: 99px; padding: 1.2cqw 2.6cqw; white-space: nowrap; }
.hud-btn {
  margin-left: auto; font-size: 3.5cqw; padding: 1.2cqw 2.8cqw; border-radius: 1.4cqw;
  background: rgba(243,234,216,.9); color: var(--ink); border: none; text-shadow: none;
}
.hud-btn + .hud-btn { margin-left: 0; }
body.cine #hud, body.cine #textbox { opacity: 0; pointer-events: none; }

/* ---------- 飘字 ---------- */
#toasts {
  position: absolute; top: calc(env(safe-area-inset-top) + 19cqw); right: 3cqw; z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1.4cqw; pointer-events: none;
}
.toast {
  font-size: 3.6cqw; padding: 1.2cqw 3cqw; border-radius: 99px; color: #fff8ec;
  background: rgba(30,24,18,.82); border-left: 1.2cqw solid var(--gold);
  animation: toast 2.8s ease forwards; white-space: nowrap; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.35);
}
.toast.good { border-left-color: #6fae7f; }
.toast.bad { border-left-color: #e0503f; }
.toast.item { border-left-color: #d9b56a; }
@keyframes toast {
  0% { opacity: 0; transform: translateX(6cqw); } 10% { opacity: 1; transform: none; }
  80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-3cqw); }
}

/* ---------- 文字框 ---------- */
#textbox {
  position: absolute; left: 3cqw; right: 3cqw; z-index: 10;
  bottom: calc(env(safe-area-inset-bottom) + 3cqw); height: 29%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(var(--paper), var(--paper-2));
  border-radius: 1.6cqw; padding: 5.4cqw 5cqw 4cqw;
  box-shadow: 0 2cqw 6cqw rgba(0,0,0,.5), inset 0 0 0 1px rgba(120,95,60,.45), inset 0 0 0 1.4cqw rgba(243,234,216,.0), inset 0 0 0 calc(1.4cqw + 1px) rgba(120,95,60,.25);
  transition: opacity .4s;
}
#namebar {
  position: absolute; top: -4.4cqw; left: 4cqw; font-size: 4cqw; letter-spacing: .15em;
  background: var(--zhu); color: #f9f0e1; padding: 1.2cqw 3.4cqw 1.2cqw 3.6cqw; border-radius: .8cqw;
  box-shadow: 0 1cqw 2cqw rgba(0,0,0,.3); display: none;
}
#namebar.on { display: block; }
#namebar small { font-size: 2.8cqw; opacity: .8; margin-left: 1.6cqw; letter-spacing: 0; }
#text {
  font-size: var(--fs); line-height: 1.75; height: 100%; overflow-y: auto; scrollbar-width: none;
  text-align: justify; white-space: pre-wrap;
}
#text::-webkit-scrollbar { display: none; }
#text.thought { color: var(--ink-2); font-style: italic; }
#text.narr { color: #2d261f; }
#text .ponder { color: var(--zhu); text-decoration: underline dotted var(--zhu); text-underline-offset: .35em; text-decoration-thickness: 2px; cursor: pointer; }
#more { position: absolute; right: 4cqw; bottom: 2cqw; color: var(--zhu); font-size: 4cqw; opacity: 0; animation: bob 1.1s ease-in-out infinite; }
#more.on { opacity: 1; }
@keyframes bob { 50% { transform: translateY(.8cqw); } }

/* ---------- 选项 ---------- */
#choices {
  position: absolute; left: 6cqw; right: 6cqw; z-index: 15;
  bottom: calc(env(safe-area-inset-bottom) + 3cqw + 29% + 3cqw);
  display: flex; flex-direction: column; gap: 2.4cqw; max-height: 52%; overflow-y: auto;
  scrollbar-width: none;
}
#choices::-webkit-scrollbar { display: none; }
.choice {
  position: relative; text-align: left; font-size: 4.2cqw; line-height: 1.5;
  padding: 3cqw 4cqw 3cqw 6cqw; border: none; border-radius: 1.2cqw;
  background: linear-gradient(90deg, rgba(243,234,216,.97), rgba(231,219,194,.97));
  box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.45), inset 0 0 0 1px rgba(120,95,60,.4);
  opacity: 0; transform: translateY(2cqw); animation: rise .35s ease forwards;
}
.choice::before { content: ""; position: absolute; left: 2.6cqw; top: 25%; bottom: 25%; width: .9cqw; border-radius: 1cqw; background: var(--zhu); }
.choice:active { transform: scale(.98); filter: brightness(.95); }
.choice .tag { display: inline-block; font-size: 2.9cqw; padding: .2cqw 1.4cqw; border-radius: .6cqw; margin-right: 1.6cqw; vertical-align: .2em; color: #fff7ea; background: var(--ink-2); }
.choice .tag.risk { background: var(--zhu); }
.choice .tag.pen { background: #3b4a52; }
.choice .tag.need { background: var(--gold); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- 浮层 ---------- */
.overlay { position: absolute; inset: 0; z-index: 40; }
.hidden { display: none !important; }

#card { background: rgba(12,10,8,.78); display: grid; place-items: center; animation: fade .5s ease; padding: 6cqw; }
@keyframes fade { from { opacity: 0; } }
.card-paper {
  width: 100%; max-height: 92%; overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(var(--paper), var(--paper-2)); border-radius: 2cqw; padding: 7cqw 6cqw;
  box-shadow: 0 3cqw 10cqw rgba(0,0,0,.6), inset 0 0 0 1px rgba(120,95,60,.45);
}
.card-paper::-webkit-scrollbar { display: none; }
.chapter-card { text-align: center; color: #efe6d2; }
.chapter-card .no { font-size: 4.4cqw; letter-spacing: .6em; opacity: .8; }
.chapter-card .name { font-size: 12cqw; letter-spacing: .25em; margin: 4cqw 0; color: #f6eedd; text-shadow: 0 0 4cqw rgba(0,0,0,.6); }
.chapter-card .sub { font-size: 3.6cqw; opacity: .75; line-height: 1.8; }
.chapter-card .tap { margin-top: 10cqw; font-size: 3.2cqw; opacity: .5; animation: bob 1.4s infinite; }
.sum h2, .end h2 { margin: 0 0 1cqw; font-size: 6.4cqw; font-weight: normal; letter-spacing: .2em; text-align: center; color: var(--zhu); }
.sum h3, .end h3 { margin: 5cqw 0 2cqw; font-size: 3.8cqw; font-weight: normal; color: var(--ink-2); letter-spacing: .2em; border-bottom: 1px solid rgba(120,95,60,.3); padding-bottom: 1cqw; }
.sum .lead, .end .lead { text-align: center; font-size: 3.4cqw; color: var(--ink-2); }
.sum .big { text-align: center; font-size: 13cqw; color: var(--zhu); margin: 2cqw 0 0; }
.rows { display: grid; grid-template-columns: 1fr auto; gap: 1.6cqw 3cqw; font-size: 3.8cqw; }
.rows .up { color: var(--lv); } .rows .down { color: var(--zhu); }
.end .title { font-size: 10cqw; text-align: center; letter-spacing: .3em; color: var(--ink); margin: 3cqw 0 1cqw; }
.end p { font-size: 3.9cqw; line-height: 1.8; margin: 2cqw 0; }
.btn {
  display: block; width: 100%; margin-top: 5cqw; padding: 3.2cqw; font-size: 4.2cqw; border: none; border-radius: 1.2cqw;
  background: var(--zhu); color: #fbf2e3; letter-spacing: .3em;
}
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(80,60,40,.5); }

/* 账簿 / 卷宗 */
.panel { background: linear-gradient(var(--paper), var(--paper-2)); display: flex; flex-direction: column; animation: fade .3s; padding-top: env(safe-area-inset-top); }
.panel-head { display: flex; align-items: center; padding: 4cqw 4cqw 2cqw; gap: 2cqw; }
.panel-head h2 { margin: 0; font-weight: normal; font-size: 6cqw; letter-spacing: .3em; color: var(--zhu); flex: 1; }
.panel-head .x { border: none; background: none; font-size: 7cqw; color: var(--ink-2); padding: 0 2cqw; }
.tabs { display: flex; gap: 1cqw; padding: 0 4cqw; border-bottom: 1px solid rgba(120,95,60,.35); }
.tabs button { flex: 1; border: none; background: none; font-size: 4cqw; padding: 2.6cqw 0; color: var(--ink-2); border-bottom: .8cqw solid transparent; }
.tabs button.on { color: var(--zhu); border-bottom-color: var(--zhu); }
.panel-body { flex: 1; overflow-y: auto; padding: 4cqw 4cqw calc(env(safe-area-inset-bottom) + 6cqw); scrollbar-width: none; }
.panel-body::-webkit-scrollbar { display: none; }
.person { display: grid; grid-template-columns: 15cqw 1fr; gap: 3cqw; padding: 3cqw 0; border-bottom: 1px dashed rgba(120,95,60,.3); }
.person .face { width: 15cqw; height: 19cqw; border-radius: 1.2cqw; background: #d9ccb0 center 12% / 170% auto no-repeat; box-shadow: inset 0 0 0 1px rgba(120,95,60,.4); display: grid; place-items: center; font-size: 6cqw; color: var(--ink-2); }
.person .nm { font-size: 4.4cqw; } .person .nm small { font-size: 3cqw; color: var(--ink-2); margin-left: 1.6cqw; }
.person .judge { font-size: 3.2cqw; color: var(--ink-2); line-height: 1.6; margin-top: 1cqw; }
.relbar { display: flex; align-items: center; gap: 2cqw; margin-top: 1.4cqw; font-size: 3.2cqw; }
.relbar .bar { flex: 1; height: 1.6cqw; background: rgba(80,60,40,.15); border-radius: 99px; overflow: hidden; }
.relbar .bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a6b3e, var(--lv)); }
.relbar .bar i.low { background: linear-gradient(90deg, var(--zhu), #c27a3a); }
.relbar .lab { min-width: 10cqw; text-align: right; color: var(--ink-2); }
.stat { display: grid; grid-template-columns: 16cqw 1fr 12cqw; align-items: center; gap: 2.4cqw; padding: 2.6cqw 0; font-size: 3.9cqw; border-bottom: 1px dashed rgba(120,95,60,.3); }
.stat .bar { height: 1.8cqw; background: rgba(80,60,40,.15); border-radius: 99px; overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--gold); }
.stat .v { text-align: right; color: var(--ink-2); }
.stat-desc { font-size: 3.1cqw; color: var(--ink-2); margin: -1.2cqw 0 1cqw; line-height: 1.6; }
.yinyang { position: relative; height: 3cqw; border-radius: 99px; background: linear-gradient(90deg, #f7f1e4, #2a241e); box-shadow: inset 0 0 0 1px rgba(80,60,40,.4); }
.yinyang i { position: absolute; top: -1cqw; width: 2cqw; height: 5cqw; border-radius: 1cqw; background: var(--zhu); transform: translateX(-50%); }
.item { padding: 3cqw 0; border-bottom: 1px dashed rgba(120,95,60,.3); }
.item b { font-weight: normal; font-size: 4.2cqw; color: var(--zhu); }
.item p { margin: 1cqw 0 0; font-size: 3.4cqw; color: var(--ink-2); line-height: 1.7; }
.log { font-size: 3.6cqw; line-height: 1.7; padding: 2cqw 0; border-bottom: 1px dashed rgba(120,95,60,.25); }
.log small { color: var(--ink-2); display: block; font-size: 3cqw; }
.empty { color: var(--ink-2); font-size: 3.6cqw; text-align: center; padding: 10cqw 0; }
.menu-list { display: flex; flex-direction: column; gap: 3cqw; }
.slot { text-align: left; border: none; border-radius: 1.2cqw; padding: 3.4cqw 4cqw; font-size: 3.9cqw; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(120,95,60,.35); }
.slot small { display: block; color: var(--ink-2); font-size: 3cqw; margin-top: .6cqw; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; font-size: 3.9cqw; padding: 2cqw 0; }
.seg { display: flex; border-radius: 1cqw; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(120,95,60,.45); }
.seg button { border: none; background: none; padding: 1.8cqw 3cqw; font-size: 3.5cqw; }
.seg button.on { background: var(--zhu); color: #fbf2e3; }
.credits { font-size: 3.3cqw; line-height: 1.8; color: var(--ink-2); white-space: pre-wrap; }

/* 琢磨注释 */
#note {
  position: absolute; left: 6cqw; right: 6cqw; bottom: calc(29% + 8cqw); z-index: 35;
  background: #2a231c; color: #f3e9d6; font-size: 3.8cqw; line-height: 1.75; padding: 4cqw 4.4cqw;
  border-radius: 1.4cqw; border-left: 1.2cqw solid var(--zhu); box-shadow: 0 2cqw 6cqw rgba(0,0,0,.5);
  animation: fade .25s;
}
#note b { color: #e8a08f; font-weight: normal; display: block; margin-bottom: 1cqw; font-size: 3.4cqw; letter-spacing: .2em; }

/* 标题页 */
#title { background: #0e0c0a center / cover no-repeat; display: flex; flex-direction: column; }
#title::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10,8,6,.15), rgba(10,8,6,0) 40%, rgba(10,8,6,.75)); }
.title-text { position: relative; margin: calc(env(safe-area-inset-top) + 12cqw) 9cqw 0 auto; writing-mode: vertical-rl; color: #1d1914; text-shadow: 0 0 3cqw rgba(255,250,240,.5); }
.title-text .t { font-size: 15cqw; letter-spacing: .25em; }
.title-text .s { font-size: 3.6cqw; letter-spacing: .3em; margin-right: 3cqw; color: #3a3129; }
.title-seal { display: inline-block; margin-top: 3cqw; background: var(--zhu); color: #f7ecd9; font-size: 3.4cqw; padding: 1.6cqw .8cqw; border-radius: .6cqw; letter-spacing: .1em; text-shadow: none; }
.title-menu { position: relative; margin-top: auto; padding: 0 14cqw calc(env(safe-area-inset-bottom) + 14cqw); display: flex; flex-direction: column; gap: 3cqw; }
.title-menu button { font-size: 4.6cqw; letter-spacing: .5em; padding: 3.2cqw; border-radius: 1.2cqw; border: none; background: rgba(243,234,216,.92); color: var(--ink); box-shadow: 0 1cqw 4cqw rgba(0,0,0,.45); }
.title-menu button.main { background: var(--zhu); color: #fbf1e1; }
.title-menu button:disabled { opacity: .45; }
.title-foot { position: relative; text-align: center; color: rgba(240,230,210,.6); font-size: 2.8cqw; padding-bottom: calc(env(safe-area-inset-bottom) + 4cqw); margin-top: -10cqw; }