:root {
  --ink: #172a27;
  --deep: #0d211e;
  --jade: #244a42;
  --jade-light: #53776d;
  --paper: #eee7d7;
  --paper-light: #f8f3e8;
  --gold: #b58a42;
  --gold-light: #d6b36a;
  --red: #8d312d;
  --muted: #7b7569;
  --shadow: 0 24px 70px rgba(6, 18, 16, .25);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background: #d9d1bd;
  font-family: "Noto Serif SC", "Songti SC", serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

.paper-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.palace-bg {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(circle at 74% 18%, rgba(239, 211, 142, .5), transparent 18%),
    linear-gradient(155deg, #e8dfcb 0%, #d8d4c4 42%, #b5c1b5 100%);
}
.sun {
  position: absolute; width: 170px; height: 170px; border-radius: 50%;
  top: 10%; right: 12%; background: rgba(170, 52, 39, .66); filter: blur(.2px);
}
.roof {
  position: absolute; bottom: 6%; width: 62vw; height: 20vw; opacity: .12;
  background: var(--deep); clip-path: polygon(4% 40%, 44% 40%, 48% 27%, 52% 40%, 94% 40%, 100% 52%, 75% 50%, 77% 58%, 73% 58%, 73% 100%, 23% 100%, 23% 58%, 19% 58%, 21% 50%, 0 52%);
}
.roof-one { left: -14%; }
.roof-two { right: -22%; bottom: 0; transform: scale(.8); }
.mist {
  position: absolute; height: 25%; width: 80%; border-radius: 50%; filter: blur(40px);
  background: rgba(248, 245, 234, .55);
}
.mist-one { left: -20%; bottom: 10%; }
.mist-two { right: -15%; top: 35%; }

#app { position: relative; z-index: 2; min-height: 100vh; }
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; animation: fadeIn .7s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.landing-screen {
  padding: 30px 5vw 22px; flex-direction: column; justify-content: space-between;
  background: linear-gradient(90deg, rgba(17,42,37,.93) 0 35%, rgba(17,42,37,.55) 57%, transparent);
  color: var(--paper-light);
}
.top-nav { display: flex; justify-content: space-between; align-items: center; }
.brand-mark, .player-seal > span {
  display: grid; place-items: center; border: 1px solid rgba(214,179,106,.75);
  width: 46px; height: 46px; color: var(--gold-light); font-size: 24px;
  transform: rotate(45deg);
}
.brand-mark { margin-left: 6px; }
.brand-mark::first-letter, .player-seal > span { transform: rotate(-45deg); }
.text-button {
  border: 0; background: transparent; color: rgba(248,243,232,.65); cursor: pointer;
  letter-spacing: .16em; font-size: 12px;
}
.landing-copy { width: min(510px, 90vw); margin-left: clamp(0px, 8vw, 130px); }
.eyebrow { color: var(--gold); letter-spacing: .35em; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.landing-copy h1 {
  margin: 15px 0 0; font-family: "Ma Shan Zheng", cursive; font-weight: 400;
  font-size: clamp(70px, 9vw, 134px); line-height: .78; letter-spacing: .02em;
  text-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.landing-copy h1 span { display: block; }
.landing-copy h1 span:last-child { margin-left: .65em; color: #e3d6b6; }
.subtitle { margin: 34px 0 16px; font-size: 15px; letter-spacing: .48em; color: #cdbf9d; }
.gold-line { display: flex; align-items: center; width: 310px; color: var(--gold-light); gap: 12px; }
.gold-line i { display: block; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold)); }
.gold-line i:last-child { transform: rotate(180deg); }
.intro { font-size: 15px; line-height: 2.15; color: rgba(248,243,232,.72); letter-spacing: .1em; margin: 22px 0 27px; }
.landing-actions { display: flex; gap: 12px; align-items: stretch; }
.primary-button, .secondary-button {
  min-width: 184px; min-height: 56px; border: 0; cursor: pointer; transition: .25s ease;
}
.primary-button {
  position: relative; overflow: hidden; color: var(--deep);
  background: linear-gradient(135deg, #d9ba76, #b58942); box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.primary-button::after {
  content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.34); pointer-events: none;
}
.primary-button span { display: block; font-weight: 700; letter-spacing: .25em; }
.primary-button small { font-size: 8px; letter-spacing: .28em; opacity: .65; }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.primary-button.disabled { opacity: .45; cursor: not-allowed; transform: none; }
.secondary-button {
  border: 1px solid rgba(214,179,106,.55); background: rgba(20,48,43,.42);
  color: inherit; letter-spacing: .2em;
}
.secondary-button:hover { background: rgba(181,138,66,.16); }
.gallery-link {
  margin-top: 19px; border: 0; padding: 4px 0; background: transparent; color: #bdb39b;
  cursor: pointer; font-size: 12px; letter-spacing: .16em;
}
.gallery-link span { color: var(--gold-light); margin-left: 10px; }
.landing-records { display: flex; align-items: center; gap: 24px; }
.landing-footer { display: flex; align-items: center; gap: 12px; font-size: 10px; color: rgba(255,255,255,.38); letter-spacing: .2em; }
.landing-footer i { width: 30px; height: 1px; background: rgba(255,255,255,.22); }
.landing-credit { color: rgba(255,255,255,.34); font-size: 9px; font-weight: 400; letter-spacing: .12em; }

.setup-screen {
  padding: 30px; align-items: center; justify-content: center;
  background: rgba(244,239,226,.76); backdrop-filter: blur(6px);
}
.back-button {
  position: absolute; top: 30px; left: 5vw; background: none; border: 0; cursor: pointer;
  color: var(--muted); letter-spacing: .15em;
}
.setup-wrap { width: min(980px, 92vw); text-align: center; }
.setup-progress { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 18px; }
.setup-progress i {
  display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(36,74,66,.24);
  border-radius: 50%; color: #8b8478; background: rgba(248,243,232,.66); font-size: 11px; font-style: normal;
}
.setup-progress i.active { color: var(--paper-light); border-color: var(--red); background: var(--red); }
.setup-progress i.done { color: var(--deep); border-color: var(--gold); background: var(--gold-light); }
.setup-progress span { width: 42px; height: 1px; background: rgba(36,74,66,.18); }
.setup-step { display: none; animation: storyIn .35s ease; }
.setup-step.active { display: block; }
.setup-wrap h2, .modal h2 { font-family: "Ma Shan Zheng"; font-size: 48px; font-weight: 400; margin: 5px 0 3px; }
.setup-lead, .modal-lead { color: var(--muted); font-size: 13px; letter-spacing: .1em; }
.origin-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 16px; text-align: left; }
.origin-card {
  position: relative; min-height: 162px; padding: 18px 19px; border: 1px solid rgba(36,74,66,.16);
  background: rgba(248,243,232,.72); cursor: pointer; transition: .3s ease; overflow: hidden;
}
.origin-card::before {
  content: attr(data-number); position: absolute; right: 12px; bottom: -25px;
  font-family: "Ma Shan Zheng"; font-size: 112px; color: rgba(36,74,66,.04);
}
.origin-card:hover, .origin-card.selected { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow); }
.origin-card.selected { background: var(--deep); color: var(--paper-light); }
.origin-card .card-icon { font-size: 26px; color: var(--gold); }
.origin-card h3 { margin: 10px 0 6px; font-size: 16px; letter-spacing: .12em; }
.origin-card p { color: var(--muted); font-size: 11px; line-height: 1.65; min-height: 38px; }
.origin-card.selected p { color: rgba(248,243,232,.62); }
.bonus-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.bonus-tags span { border: 1px solid rgba(181,138,66,.32); padding: 4px 8px; color: var(--gold); font-size: 10px; }
.setup-subtitle { display: flex; align-items: center; gap: 12px; margin: 10px 0; color: var(--jade); text-align: left; }
.setup-subtitle span { font-weight: 700; font-size: 12px; letter-spacing: .18em; }
.setup-subtitle i { width: 38px; height: 1px; background: var(--gold); }
.setup-subtitle small { color: var(--muted); font-size: 9px; }
.temper-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 15px; }
.temper-card { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; padding: 10px 11px; text-align: left; border: 1px solid rgba(36,74,66,.16); background: rgba(248,243,232,.72); cursor: pointer; }
.temper-card b { display: grid; place-items: center; width: 31px; height: 31px; color: var(--red); border: 1px solid currentColor; font-family: "Ma Shan Zheng"; font-size: 15px; }
.temper-card strong, .temper-card small { display: block; }
.temper-card strong { font-size: 11px; letter-spacing: .08em; }
.temper-card small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.temper-card:hover, .temper-card.selected { color: var(--paper-light); border-color: var(--gold); background: var(--deep); }
.temper-card.selected small { color: rgba(255,255,255,.55); }
.name-field { display: flex; margin: 0 auto 14px; width: min(520px, 90vw); align-items: center; border-bottom: 1px solid rgba(36,74,66,.25); }
.name-field span { font-size: 12px; color: var(--gold); letter-spacing: .2em; }
.name-field input { flex: 1; border: 0; outline: 0; background: transparent; padding: 12px 18px; text-align: center; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: .25em; }
.name-field em { font-style: normal; color: #999285; font-size: 10px; }
.setup-summary {
  width: min(520px, 90vw); min-height: 58px; margin: 8px auto 18px; padding: 12px 16px;
  color: var(--muted); border: 1px solid rgba(36,74,66,.14); background: rgba(248,243,232,.58);
  font-size: 11px; line-height: 1.8;
}
.setup-summary strong { color: var(--red); }
.setup-page-actions { display: flex; justify-content: center; gap: 12px; }
.setup-page-actions .secondary-button { color: var(--jade); background: rgba(248,243,232,.52); border-color: rgba(36,74,66,.25); }

.game-screen { flex-direction: column; background: rgba(238,231,215,.93); }
.game-header {
  min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px 3vw; color: var(--paper-light); background: var(--deep); border-bottom: 2px solid var(--gold);
}
.player-seal { display: flex; align-items: center; gap: 16px; }
.player-seal > span { width: 36px; height: 36px; font-size: 15px; transform: none; background: var(--red); border-color: #b9675c; }
.player-seal small, .player-seal strong { display: block; }
.player-seal small { color: var(--gold-light); font-size: 9px; letter-spacing: .25em; }
.player-seal strong { font-size: 13px; letter-spacing: .18em; margin-top: 3px; }
.chapter-progress { text-align: center; color: var(--gold-light); font-size: 11px; letter-spacing: .25em; }
.chapter-progress > div { width: 180px; height: 2px; margin-top: 8px; background: rgba(255,255,255,.12); }
.chapter-progress i { display: block; height: 100%; width: 10%; background: var(--gold-light); transition: width .5s ease; }
.header-actions { display: flex; justify-content: flex-end; gap: 9px; }
.icon-button { width: 35px; height: 35px; border: 1px solid rgba(214,179,106,.3); background: none; color: var(--gold-light); cursor: pointer; }
.game-layout {
  display: grid; grid-template-columns: 230px minmax(400px, 1fr) 210px; flex: 1; min-height: 0;
  background: linear-gradient(90deg, rgba(211,202,184,.72), rgba(244,239,228,.9) 22% 78%, rgba(211,202,184,.72));
}
.game-dock {
  position: relative; z-index: 8; flex: 0 0 66px; display: grid; grid-template-columns: repeat(5, 1fr);
  width: min(620px, 92vw); margin: 0 auto; padding: 5px 18px calc(5px + env(safe-area-inset-bottom));
  border: 1px solid rgba(181,138,66,.32); border-bottom: 0; border-radius: 18px 18px 0 0;
  background: rgba(13,33,30,.97); box-shadow: 0 -8px 26px rgba(8,24,21,.18);
}
.game-dock button {
  position: relative; display: grid; place-items: center; align-content: center; gap: 2px; min-width: 0;
  color: rgba(239,231,215,.55); border: 0; background: transparent; cursor: pointer;
}
.game-dock button::before { content: ""; position: absolute; top: -5px; width: 30px; height: 2px; background: transparent; }
.game-dock button.active { color: var(--gold-light); }
.game-dock button.active::before { background: var(--gold-light); }
.game-dock b { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 50%; font-family: "Ma Shan Zheng"; font-size: 13px; font-weight: 400; }
.game-dock span { font-size: 10px; letter-spacing: .08em; }
.game-dock i, .secret-tabs i {
  position: absolute; top: 4px; left: calc(50% + 9px); min-width: 15px; height: 15px; padding: 0 4px;
  color: #fff; border-radius: 9px; background: var(--red); font-size: 8px; font-style: normal; line-height: 15px;
}
.stats-panel, .memory-panel { margin: 14px 10px; padding: 22px 18px; border-radius: 14px; background: rgba(248,243,232,.72); box-shadow: 0 8px 24px rgba(29,49,44,.06); }
.stats-panel { border-right: 1px solid rgba(36,74,66,.12); }
.memory-panel { border-left: 1px solid rgba(36,74,66,.12); }
.panel-title { display: flex; gap: 12px; align-items: center; color: var(--jade); font-size: 14px; font-weight: 700; letter-spacing: .2em; }
.panel-title i { flex: 1; height: 1px; background: rgba(36,74,66,.2); }
.stats-list { margin: 26px 0 35px; }
.stat-row { margin-bottom: 18px; }
.stat-copy { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 7px; }
.stat-copy strong { color: var(--gold); }
.stat-bar { height: 3px; background: rgba(36,74,66,.1); }
.stat-bar i { display: block; height: 100%; background: var(--jade); transition: width .5s ease; }
.relation-title { margin: 28px 0 13px; font-size: 11px; color: var(--muted); letter-spacing: .2em; }
.relation-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 12px; border-bottom: 1px dotted rgba(36,74,66,.15); }
.relation-row span:last-child { color: var(--red); letter-spacing: .1em; }
.stats-note { margin-top: 30px; color: #9a9386; font-size: 9px; line-height: 1.8; }
.exposure-box { margin: -12px 0 26px; padding: 12px; border: 1px solid rgba(129,39,42,.2); background: rgba(129,39,42,.035); }
.exposure-box > div:first-child { display: flex; justify-content: space-between; color: var(--red); font-size: 10px; letter-spacing: .12em; }
.exposure-box strong { font-size: 13px; }
.exposure-track { height: 4px; margin: 9px 0 7px; overflow: hidden; background: rgba(129,39,42,.12); }
.exposure-track i { display: block; width: 5%; height: 100%; background: linear-gradient(90deg, var(--gold), var(--red)); transition: width .45s ease; }
.exposure-box small { color: #8f887d; font-size: 8px; }

.story-stage {
  position: relative; margin: 14px 0; padding: 24px clamp(30px, 5vw, 78px) 38px; overflow-y: auto;
  max-height: calc(100vh - 170px); border: 1px solid rgba(36,74,66,.08); border-radius: 16px;
  background: rgba(248,243,232,.78); box-shadow: 0 12px 34px rgba(24,45,40,.08);
}
.scene-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.scene-heading > div { display: flex; align-items: center; gap: 12px; }
.scene-heading span { font-size: 13px; color: var(--jade); font-weight: 700; letter-spacing: .24em; }
.scene-heading i { width: 52px; height: 1px; background: var(--gold); }
.scene-heading p { margin: 0; font-size: 10px; color: #9a9386; letter-spacing: .16em; }
.scene-time-wrap { text-align: right; }
.scene-time-wrap small { display: block; margin-top: 4px; color: #b08a4b; font-size: 9px; letter-spacing: .06em; }
.scene-notes { width: min(760px, 100%); margin: 0 auto 20px; color: #71695d; }
.scene-notes.hidden { display: none; }
.place-intro { display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-left: 3px solid var(--gold); background: rgba(181,138,66,.08); }
.place-intro b { flex: 0 0 auto; color: var(--jade); font-size: 10px; letter-spacing: .09em; }
.place-intro span { font-size: 10px; line-height: 1.55; }
.scene-notes details { margin-top: 7px; border: 1px solid rgba(36,74,66,.1); background: rgba(255,255,255,.35); }
.scene-notes summary { padding: 8px 12px; color: var(--red); font-size: 10px; cursor: pointer; }
.scene-notes ul { display: grid; gap: 7px; margin: 0; padding: 0 12px 11px; list-style: none; }
.scene-notes li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 10px; line-height: 1.55; }
.scene-notes li b { color: var(--jade); }
.scene-visual {
  position: relative; width: min(760px, 100%); aspect-ratio: 16 / 7; margin: 0 auto 22px;
  overflow: hidden; border: 1px solid rgba(181,138,66,.32); border-radius: 13px; box-shadow: 0 16px 34px rgba(19,42,37,.13);
  animation: storyIn .55s ease;
}
.scene-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(8,24,21,.82));
  pointer-events: none;
}
.scene-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.scene-visual figcaption {
  position: absolute; z-index: 1; left: 25px; right: 25px; bottom: 17px; margin: 0;
  color: #f2eadb; font-size: 11px; letter-spacing: .14em; text-shadow: 0 2px 8px #000;
}
.story-log { width: min(690px, 100%); margin: 0 auto; }
.narration {
  margin: 0 0 18px; padding-left: 16px; border-left: 2px solid var(--gold);
  color: #817a70; font-size: 13px; line-height: 1.8; letter-spacing: .035em; animation: storyIn .5s ease;
}
.dialogue { margin: 0 0 20px; animation: storyIn .55s ease; }
.speaker { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.speaker .mini-seal { display: grid; place-items: center; width: 27px; height: 27px; background: var(--red); color: #f4e9d5; font-size: 11px; transform: rotate(45deg); }
.speaker .mini-seal i { font-style: normal; transform: rotate(-45deg); }
.speaker-portrait {
  width: 54px; height: 54px; flex: 0 0 auto; object-fit: cover; object-position: 50% 24%;
  border-radius: 50%; border: 2px solid rgba(181,138,66,.72);
  box-shadow: 0 4px 14px rgba(19,42,37,.16);
}
.speaker strong { font-size: 14px; letter-spacing: .18em; }
.dialogue blockquote { margin: 0; padding: 16px 20px; background: rgba(255,255,255,.64); border: 1px solid rgba(36,74,66,.08); border-radius: 5px 15px 15px 15px; box-shadow: 0 7px 18px rgba(31,51,46,.05); font-size: 16px; line-height: 1.85; letter-spacing: .04em; }
.dialogue.has-portrait { padding: 3px 0 7px; }
.dialogue.has-portrait blockquote { margin-left: 24px; border-left: 2px solid rgba(181,138,66,.48); }
.choice-echo {
  margin: 0 0 30px; padding: 18px 22px; border: 1px solid rgba(181,138,66,.22);
  border-left: 3px solid var(--gold); background: rgba(239,232,216,.56); animation: storyIn .45s ease;
}
.choice-echo span { color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.choice-echo p { margin: 8px 0 0; color: #777065; font-size: 12px; line-height: 1.9; letter-spacing: .04em; }
.consequence-card {
  position: relative; margin: 8vh auto 0; padding: 46px 48px; overflow: hidden;
  border: 1px solid rgba(181,138,66,.3); background: rgba(255,255,255,.46); text-align: center;
  animation: storyIn .55s ease;
}
.consequence-card::before {
  content: "果"; position: absolute; right: -12px; bottom: -54px; color: rgba(129,39,42,.055);
  font-family: "Ma Shan Zheng", cursive; font-size: 170px; line-height: 1;
}
.consequence-card span { color: var(--gold); font-size: 10px; letter-spacing: .35em; }
.consequence-card h3 { margin: 16px 0 20px; color: var(--jade); font-size: 24px; letter-spacing: .18em; }
.consequence-card p { position: relative; margin: 0; color: #6f685e; font-size: 14px; line-height: 2.2; letter-spacing: .055em; }
.consequence-button { margin-top: 10px; text-align: center; }
@keyframes storyIn { from { opacity: 0; transform: translateY(8px); } }
.choices { width: min(690px, 100%); margin: 24px auto 0; display: grid; gap: 9px; }
.choice-button {
  position: relative; text-align: left; padding: 16px 54px 16px 20px; border: 1px solid rgba(36,74,66,.18);
  border-radius: 10px; background: rgba(255,252,245,.88); box-shadow: 0 5px 14px rgba(31,51,46,.04); cursor: pointer; transition: .24s ease;
}
.choice-button::after { content: "›"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 24px; }
.choice-button:hover { background: var(--jade); color: var(--paper-light); border-color: var(--jade); transform: translateX(5px); }
.choice-button span { display: block; font-size: 18px; line-height: 1.5; letter-spacing: .035em; }
.choice-button small { display: block; margin-top: 5px; color: var(--gold); font-size: 12px; letter-spacing: .08em; }
.choice-button.locked { opacity: .45; cursor: not-allowed; }
.choice-button.locked:hover { background: rgba(248,243,232,.82); color: var(--ink); transform: none; }

.memory-list { list-style: none; margin: 24px 0; padding: 0; }
.memory-list li { position: relative; padding: 0 0 18px 17px; color: var(--muted); font-size: 11px; line-height: 1.7; border-left: 1px solid rgba(36,74,66,.18); }
.memory-list li::before { content: ""; position: absolute; left: -4px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.item-slot { margin-top: 30px; border: 1px solid rgba(181,138,66,.26); padding: 14px; }
.item-slot span, .item-slot strong { display: block; }
.item-slot span { color: #989083; font-size: 9px; letter-spacing: .2em; }
.item-slot strong { color: var(--red); margin-top: 7px; font-size: 12px; }

.modal-backdrop { position: fixed; z-index: 30; inset: 0; background: rgba(5,20,17,.72); backdrop-filter: blur(5px); }
.modal {
  position: fixed; z-index: 31; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(820px, 91vw); max-height: 88vh; overflow-y: auto; padding: 42px;
  text-align: center; background: var(--paper-light); box-shadow: var(--shadow);
}
.modal::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(181,138,66,.25); pointer-events: none; }
.modal-close { position: absolute; z-index: 2; right: 19px; top: 14px; border: 0; background: none; font-size: 25px; color: var(--muted); cursor: pointer; }
.secret-button { position: relative; color: #f0d393; border-color: rgba(240,211,147,.55); }
.secret-button::after {
  content: ""; position: absolute; right: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2px var(--deep);
}
.secret-modal { width: min(1040px, 95vw); max-height: 92vh; text-align: left; }
.secret-modal > .eyebrow, .secret-modal > h2 { text-align: center; }
.secret-modal > h2 { margin: 4px 0 22px; font-size: 46px; }
.secret-dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.palace-life-hero { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.palace-life-hero small { color: var(--gold); font-size: 9px; letter-spacing: .22em; }
.palace-life-hero h3 { margin: 2px 0; color: var(--jade); font-family: "Ma Shan Zheng"; font-size: 27px; font-weight: 400; }
.palace-life-hero p { margin: 0; color: #8f877a; font-size: 10px; }
.palace-level { width: 120px; text-align: right; color: var(--red); font-size: 11px; font-weight: 700; }
.palace-level i { display: block; height: 5px; margin-top: 6px; overflow: hidden; border-radius: 5px; background: rgba(141,49,45,.12); }
.palace-level b { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .3s ease; }
.palace-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.palace-feature-grid button { min-width: 0; padding: 10px 5px 9px; color: var(--ink); border: 1px solid rgba(36,74,66,.1); border-radius: 12px; background: rgba(255,255,255,.68); box-shadow: 0 5px 16px rgba(22,43,38,.05); cursor: pointer; }
.palace-feature-grid i { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 5px; color: #f6ead4; border-radius: 10px; background: var(--jade); font-family: "Ma Shan Zheng"; font-size: 16px; font-style: normal; }
.palace-feature-grid button:nth-child(3n+2) i { background: var(--red); }
.palace-feature-grid button:nth-child(3n) i { color: #4d3920; background: var(--gold-light); }
.palace-feature-grid span, .palace-feature-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palace-feature-grid span { font-size: 11px; font-weight: 700; }
.palace-feature-grid small { margin-top: 2px; color: #9b9284; font-size: 8px; }
.palace-guide-open {
  width: 100%; margin: 0 0 13px; padding: 12px 14px; color: var(--jade);
  border: 1px solid rgba(181,138,66,.2); border-radius: 12px; background: rgba(255,255,255,.48);
  font-family: inherit; font-size: 12px; letter-spacing: .08em; cursor: pointer;
}
.training-center { margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(36,74,66,.13); border-radius: 12px; background: rgba(255,255,255,.57); }
.training-center > header { display: flex; justify-content: space-between; gap: 12px; }
.training-center > header span { color: var(--jade); font-size: 12px; font-weight: 700; letter-spacing: .15em; }
.training-center > header small { color: #72906d; font-size: 9px; }
.talent-bars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; margin-top: 12px; }
.talent-row { display: grid; grid-template-columns: 38px 1fr 22px; align-items: center; gap: 6px; color: #746d62; font-size: 9px; }
.talent-row i { height: 5px; overflow: hidden; border-radius: 5px; background: rgba(36,74,66,.1); }
.talent-row i b { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), #79a28e); }
.palace-resources { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(36,74,66,.1); }
.palace-resources span { flex: 1; color: #887f71; font-size: 9px; }
.palace-resources b { color: var(--red); font-size: 11px; }
.secret-score { padding: 14px 16px; color: #e9e1d3; background: var(--deep); border-bottom: 2px solid var(--gold); }
.secret-score span, .secret-score strong, .secret-score small { display: block; }
.secret-score span { color: var(--gold-light); font-size: 9px; letter-spacing: .17em; }
.secret-score strong { margin: 5px 0 2px; font-size: 25px; }
.secret-score small { color: rgba(255,255,255,.48); font-size: 8px; }
.secret-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.secret-column { min-height: 230px; padding: 15px; border: 1px solid rgba(36,74,66,.16); background: rgba(239,232,216,.64); }
.secret-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; color: var(--jade); font-weight: 700; font-size: 12px; letter-spacing: .15em; }
.secret-heading small { color: #9b9284; font-size: 8px; font-weight: 400; }
.secret-feed { display: grid; gap: 8px; max-height: 185px; overflow-y: auto; padding-right: 4px; }
.secret-feed-empty { padding: 38px 10px; text-align: center; color: #9b9284; font-size: 10px; }
.letter-card, .rumor-card { position: relative; padding: 10px 12px; border-left: 2px solid var(--gold); background: rgba(255,255,255,.58); }
.letter-card header, .rumor-card header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.letter-card strong, .rumor-card strong { color: var(--red); font-size: 10px; }
.letter-card time, .rumor-card time { color: #9a9386; font-size: 8px; }
.letter-card p, .rumor-card p { margin: 0; color: #6f685e; font-size: 10px; line-height: 1.7; }
.letter-actions { display: flex; gap: 7px; margin-top: 8px; }
.letter-actions button {
  padding: 5px 9px; color: var(--jade); border: 1px solid rgba(36,74,66,.22); background: transparent;
  font-family: inherit; font-size: 8px; cursor: pointer;
}
.letter-actions button:hover { color: #fff; background: var(--jade); }
.letter-card.replied { opacity: .66; border-left-color: #929087; }
.rumor-card.danger { border-left-color: var(--red); background: rgba(129,39,42,.07); }
.secret-event { margin-top: 14px; padding: 16px 18px; color: #eee4d2; background: #182d28; }
.secret-event header { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.secret-event header span { color: var(--gold-light); font-size: 9px; letter-spacing: .2em; }
.secret-event header strong { font-size: 15px; letter-spacing: .1em; }
.secret-event p { margin: 9px 0 12px; color: rgba(255,255,255,.68); font-size: 10px; line-height: 1.8; }
.secret-event-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.secret-event-actions button { padding: 7px 11px; color: #f1e6d1; border: 1px solid rgba(216,186,120,.35); background: rgba(255,255,255,.04); font-family: inherit; font-size: 9px; cursor: pointer; }
.secret-event-actions button:hover { color: var(--deep); background: var(--gold-light); }
.secret-event.resolved { color: var(--ink); border: 1px solid rgba(181,138,66,.24); background: rgba(238,229,210,.65); }
.secret-event.resolved p { color: #756d61; }
.palace-schedule, .romance-board { margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(181,138,66,.25); background: rgba(246,240,226,.72); }
.palace-schedule > header, .romance-board > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.palace-schedule > header span, .romance-board > header span { color: var(--jade); font-size: 12px; font-weight: 700; letter-spacing: .15em; }
.palace-schedule > header small, .romance-board > header small { color: #91897d; font-size: 8px; }
.schedule-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 11px; }
.schedule-actions button, .romance-candidate button {
  min-height: 38px; padding: 7px 8px; color: var(--jade); border: 1px solid rgba(36,74,66,.2);
  background: rgba(255,255,255,.52); font-size: 9px; cursor: pointer;
}
.schedule-actions button { min-height: 78px; text-align: left; border-radius: 9px; }
.schedule-actions button strong, .schedule-actions button span, .schedule-actions button small { display: block; }
.schedule-actions button strong { font-size: 11px; }
.schedule-actions button span { margin-top: 4px; color: #756f64; font-size: 8px; line-height: 1.45; }
.schedule-actions button small { margin-top: 5px; color: var(--red); font-size: 7px; }
.schedule-actions button:hover, .romance-candidate button:hover { color: #fff; background: var(--jade); }
.schedule-actions button:disabled, .romance-candidate button:disabled { opacity: .45; cursor: default; }
.palace-schedule > p, .romance-board > p { margin: 10px 0 0; color: #756f64; font-size: 9px; line-height: 1.65; }
.romance-candidates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }
.romance-candidate { padding: 9px; border: 1px solid rgba(36,74,66,.13); background: rgba(255,255,255,.42); }
.romance-candidate.focus { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(181,138,66,.2); }
.romance-candidate.locked { filter: grayscale(.7); opacity: .62; }
.romance-candidate header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 7px; }
.romance-candidate > p { min-height: 28px; margin: 0 0 7px; color: #827a6e; font-size: 8px; line-height: 1.5; }
.romance-candidate strong { color: var(--ink); font-size: 10px; }
.romance-candidate i { color: var(--red); font-size: 8px; font-style: normal; }
.romance-candidate button { width: 100%; min-height: 30px; }
.summon-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; padding: 48px; text-align: center; color: #f5eee2; background: radial-gradient(circle at 50% 36%, #263b35, #07100f 70%); }
.summon-overlay.hidden { display: none; }
.summon-overlay > small { color: var(--gold-light); font-size: 11px; letter-spacing: .3em; }
.summon-overlay h3 { margin: 17px 0 10px; color: #fff; font-family: "Noto Serif SC"; font-size: 32px; letter-spacing: .12em; }
.summon-overlay p { max-width: 420px; margin: 0 auto; color: rgba(245,238,226,.68); font-size: 12px; line-height: 1.9; }
.summon-close { position: absolute; top: 20px; right: 22px; color: #fff; border: 0; background: transparent; font-size: 27px; cursor: pointer; }
.summon-actions { display: flex; justify-content: center; gap: 22px; margin-top: 38px; }
.summon-actions button { min-width: 110px; padding: 13px 22px; color: #ddd1bc; border: 1px solid rgba(255,255,255,.2); border-radius: 30px; background: rgba(255,255,255,.08); font-family: inherit; cursor: pointer; }
.summon-actions button.primary { color: #fff; border-color: #50876c; background: #2f765b; }
.free-action { margin-top: 14px; padding: 16px 18px; border: 1px solid rgba(181,138,66,.26); }
.free-action > p { margin: -3px 0 12px; color: #847c70; font-size: 10px; line-height: 1.7; }
.free-action-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.free-action-form input { min-width: 0; padding: 11px 13px; outline: 0; color: var(--ink); border: 1px solid rgba(36,74,66,.22); background: rgba(255,255,255,.5); font-family: inherit; }
.free-action-form input:focus { border-color: var(--gold); }
.free-action-form button { padding: 0 22px; color: #fff; border: 0; background: var(--red); font-family: inherit; cursor: pointer; }
.free-action-form button:disabled { opacity: .45; cursor: not-allowed; }
.free-action-result { margin-top: 10px; padding: 10px 12px; color: #675f54; border-left: 3px solid var(--gold); background: rgba(181,138,66,.09); font-size: 10px; line-height: 1.8; }

/* 宫廷社交模拟器界面 */
.secret-modal {
  width: min(780px, 96vw); height: min(880px, 94vh); max-height: none; padding: 0; overflow: hidden;
  border: 1px solid rgba(214,179,106,.48); border-radius: 22px; background: #ece5d6; box-shadow: 0 30px 90px rgba(2,17,14,.42);
}
.secret-modal::before { inset: 5px; border-radius: 17px; border-color: rgba(255,255,255,.12); z-index: 5; }
.secret-modal .modal-close { z-index: 10; top: 29px; right: 19px; width: 30px; height: 30px; color: #dfd2b8; border-radius: 50%; background: rgba(255,255,255,.08); line-height: 25px; }
.secret-app-header { height: 150px; padding: 17px 26px 20px; color: #efe6d4; background: linear-gradient(145deg, #173b34, #0c211e 72%); }
.secret-statusbar { display: flex; justify-content: space-between; padding: 0 38px 12px 0; color: rgba(239,230,212,.48); font-size: 10px; letter-spacing: .14em; }
.secret-statusbar i { font-style: normal; }
.secret-profile { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 15px; }
.secret-profile-seal {
  display: grid; place-items: center; width: 54px; height: 54px; color: #f2dfb7; border: 1px solid var(--gold-light);
  border-radius: 15px 15px 15px 3px; background: rgba(141,49,45,.88); font-family: "Ma Shan Zheng"; font-size: 23px;
}
.secret-profile small { color: var(--gold-light); font-size: 10px; letter-spacing: .22em; }
.secret-profile h2 { margin: 2px 0 3px; color: #f4eddf; font-family: "Noto Serif SC"; font-size: 20px; font-weight: 700; letter-spacing: .1em; }
.secret-profile p { margin: 0; color: rgba(239,230,212,.52); font-size: 10px; }
.secret-online { display: flex; align-items: center; gap: 5px; color: rgba(239,230,212,.62); font-size: 10px; }
.secret-online i { width: 6px; height: 6px; border-radius: 50%; background: #92b986; box-shadow: 0 0 8px #92b986; }
.secret-tabs {
  position: relative; z-index: 6; height: 64px; display: grid; grid-template-columns: repeat(5,1fr);
  padding: 0 26px; border-bottom: 1px solid rgba(36,74,66,.12); background: #f8f3e8;
}
.secret-tabs button {
  position: relative; display: grid; place-items: center; align-content: center; gap: 2px; color: #999184;
  border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
}
.secret-tabs button.active { color: var(--jade); border-bottom-color: var(--red); }
.secret-tabs b { font-family: "Ma Shan Zheng"; font-size: 18px; font-weight: 400; }
.secret-tabs span { font-size: 10px; letter-spacing: .12em; }
.secret-tabs i { top: 8px; left: calc(50% + 9px); }
.secret-app-body { position: relative; height: calc(100% - 214px); overflow: hidden; }
.secret-view { display: none; height: 100%; overflow-y: auto; padding: 20px 24px 30px; }
.secret-view.active { display: block; animation: storyIn .25s ease; }
.secret-view[data-secret-panel="home"] {
  background:
    radial-gradient(circle at 90% 5%, rgba(181,138,66,.13), transparent 25%),
    linear-gradient(180deg, #e9e1d2, #f4eee2);
}
.secret-dashboard { gap: 9px; }
.secret-score {
  min-height: 82px; padding: 12px 14px; color: var(--ink); border: 1px solid rgba(36,74,66,.1);
  border-bottom: 2px solid var(--gold); border-radius: 11px; background: rgba(255,255,255,.68); box-shadow: 0 7px 20px rgba(22,43,38,.06);
}
.secret-score.danger { border-bottom-color: var(--red); }
.secret-score span { color: #81786b; font-size: 11px; }
.secret-score strong { margin: 3px 0 1px; color: var(--jade); font-size: 23px; }
.secret-score.danger strong { color: var(--red); }
.secret-score small { color: #9b9284; font-size: 9px; }
.secret-view .secret-event { margin-top: 14px; border-radius: 13px; box-shadow: 0 9px 24px rgba(13,33,30,.12); }
.secret-home-preview { display: grid; gap: 8px; margin-top: 13px; }
.secret-home-preview button {
  position: relative; display: grid; grid-template-columns: 90px 1fr 15px; align-items: center; gap: 8px;
  padding: 13px 15px; text-align: left; color: var(--ink); border: 1px solid rgba(36,74,66,.1);
  border-radius: 10px; background: rgba(255,255,255,.7); cursor: pointer;
}
.secret-home-preview span { color: var(--red); font-size: 11px; letter-spacing: .13em; }
.secret-home-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.secret-home-preview i { color: var(--gold); font-size: 19px; font-style: normal; }
.secret-page-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin: 2px 0 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(36,74,66,.13); }
.secret-page-heading small { color: var(--gold); font-size: 10px; letter-spacing: .2em; }
.secret-page-heading h3 { margin: 3px 0 0; color: var(--jade); font-family: "Ma Shan Zheng"; font-size: 28px; font-weight: 400; }
.secret-page-heading p { margin: 0; color: #91897d; font-size: 10px; }
.secret-view .secret-feed { max-height: none; overflow: visible; gap: 11px; }
.secret-letter-list .letter-card {
  width: min(88%, 570px); margin-right: auto; padding: 14px 16px 14px 55px; border: 0; border-radius: 6px 16px 16px 16px;
  background: #f9f5ec; box-shadow: 0 7px 20px rgba(25,44,39,.08);
}
.secret-letter-list .letter-card p, .secret-rumor-list .rumor-card p { font-size: 12px; line-height: 1.8; }
.secret-letter-list .letter-card strong, .secret-rumor-list .rumor-card strong { font-size: 12px; }
.secret-letter-list .letter-actions button { font-size: 10px; }
.secret-letter-list .letter-card::before {
  content: attr(data-sender); position: absolute; left: 13px; top: 14px; display: grid; place-items: center;
  width: 30px; height: 30px; color: #f4e8d2; border-radius: 50%; background: var(--jade); font-family: "Ma Shan Zheng"; font-size: 13px;
}
.secret-letter-list .letter-card.replied { margin-left: auto; margin-right: 0; border-radius: 16px 6px 16px 16px; background: #e5d6b5; }
.secret-letter-list .letter-card.replied::before { background: var(--red); }
.secret-rumor-list .rumor-card {
  padding: 16px 18px; border: 0; border-radius: 12px; background: rgba(255,255,255,.72);
  box-shadow: 0 7px 20px rgba(25,44,39,.07);
}
.secret-rumor-list .rumor-card::after { content: "宫墙之内"; position: absolute; right: 14px; bottom: 10px; color: rgba(141,49,45,.18); font-family: "Ma Shan Zheng"; font-size: 16px; }
.secret-rumor-list .rumor-card.danger { background: rgba(141,49,45,.08); box-shadow: inset 3px 0 var(--red), 0 7px 20px rgba(25,44,39,.07); }
.secret-view .free-action { margin: 0; padding: 22px; border: 0; border-radius: 15px; background: rgba(255,255,255,.66); box-shadow: 0 10px 28px rgba(25,44,39,.08); }
.ai-connection { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid rgba(36,74,66,.14); border-radius: 11px; background: rgba(255,255,255,.56); }
.ai-connection > i { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #9c9487; box-shadow: 0 0 0 4px rgba(156,148,135,.12); }
.ai-connection strong, .ai-connection span { display: block; }
.ai-connection strong { color: var(--jade); font-size: 12px; }
.ai-connection span { margin-top: 2px; color: #8c8478; font-size: 10px; line-height: 1.5; }
.ai-connection.online { border-color: rgba(90,139,102,.28); background: rgba(222,239,220,.6); }
.ai-connection.online > i { background: #5c9a68; box-shadow: 0 0 0 4px rgba(92,154,104,.12), 0 0 9px #75b47f; }
.ai-connection.loading > i { background: var(--gold); animation: mapPulse 1s ease infinite; }
.role-chat { display: grid; grid-template-columns: 190px 1fr; gap: 12px; }
.chat-roles { display: grid; gap: 8px; align-content: start; }
.chat-role {
  display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; padding: 10px;
  text-align: left; border: 1px solid rgba(36,74,66,.12); border-radius: 12px; background: rgba(255,255,255,.66);
  color: var(--ink); cursor: pointer;
}
.chat-role.active { border-color: rgba(129,39,42,.34); background: rgba(129,39,42,.08); }
.chat-role:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.chat-role.compact { grid-template-columns: 1fr; padding: 7px 8px; min-height: 42px; }
.chat-role img, .chat-role i {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--jade); color: #f4e8d2;
  display: grid; place-items: center; font-style: normal; font-family: "Ma Shan Zheng";
}
.chat-role strong, .chat-role span { display: block; }
.chat-role strong { font-size: 12px; color: var(--jade); }
.chat-role span { margin-top: 2px; font-size: 9px; color: #8f877a; }
.chat-window { min-height: 420px; display: flex; flex-direction: column; border-radius: 15px; background: rgba(255,255,255,.62); box-shadow: 0 10px 28px rgba(25,44,39,.08); overflow: hidden; }
.chat-log { flex: 1; display: grid; align-content: start; gap: 10px; padding: 15px; overflow-y: auto; }
.chat-bubble { max-width: 82%; padding: 10px 12px; border-radius: 13px; color: #60584d; background: #f9f5ec; font-size: 12px; line-height: 1.75; }
.chat-bubble.player { justify-self: end; color: #f7efe0; background: var(--jade); border-bottom-right-radius: 4px; }
.chat-bubble.role { justify-self: start; border-bottom-left-radius: 4px; }
.chat-bubble.contact-card { max-width: 100%; line-height: 1.9; }
.chat-bubble small { display: block; margin-bottom: 4px; color: var(--gold); font-size: 9px; letter-spacing: .12em; }
.chat-form { display: grid; grid-template-columns: 1fr 76px; gap: 8px; padding: 12px; border-top: 1px solid rgba(36,74,66,.1); background: rgba(248,243,232,.75); }
.chat-window.contact-only .chat-form, .chat-window.contact-only .chat-summary { display: none; }
.chat-form input { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid rgba(36,74,66,.15); border-radius: 9px; background: #faf6ed; color: var(--ink); font-family: inherit; }
.chat-form button { min-height: 44px; border: 0; border-radius: 9px; color: #fff; background: var(--red); font-family: inherit; cursor: pointer; }
.chat-form button:disabled { opacity: .45; cursor: not-allowed; }
.chat-summary { margin: 0; padding: 10px 14px; color: #8b8275; border-top: 1px solid rgba(36,74,66,.08); background: rgba(181,138,66,.08); font-size: 10px; line-height: 1.7; }
.secret-view .free-action > p { margin: 0 0 16px; }
.secret-view .free-action-form input { min-height: 48px; border-radius: 9px; background: #faf6ed; }
.secret-view .free-action-form button { min-width: 86px; border-radius: 9px; }
.action-notes { margin-top: 14px; padding: 15px 17px; color: #8d8578; border-left: 3px solid var(--gold); background: rgba(255,255,255,.4); font-size: 9px; line-height: 1.8; }
.action-notes span { color: var(--red); font-weight: 700; letter-spacing: .13em; }
.action-notes p { margin: 5px 0 0; }

.branch-modal {
  width: min(1380px, 98vw); height: min(940px, 95vh); overflow: hidden; padding: 30px 34px 34px;
  text-align: left; background:
    linear-gradient(rgba(246,240,226,.96), rgba(238,229,210,.96)),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(70,55,35,.03) 29px);
}
.branch-modal > .eyebrow, .branch-modal > h2, .branch-modal > .modal-lead { text-align: center; }
.branch-modal > h2 { margin: 2px 0 5px; font-size: clamp(30px, 4vw, 48px); }
.branch-modal > .modal-lead { margin: 0; }
.branch-current {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px;
  margin: 16px 0 10px; padding: 10px 16px; color: var(--paper-light); background: var(--deep);
}
.branch-current strong { color: var(--gold-light); font-size: 10px; letter-spacing: .2em; }
.branch-current span { font-size: 13px; letter-spacing: .1em; }
.branch-current small { color: rgba(255,255,255,.55); font-size: 9px; }
.branch-endings { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.branch-ending {
  min-height: 48px; display: grid; grid-template-columns: 26px 1fr; place-items: center; align-content: center; gap: 5px;
  color: #888278; border: 1px solid #b9b1a3; background: #dfd8ca; filter: grayscale(1);
}
.branch-ending b { font-family: "Ma Shan Zheng"; font-size: 17px; }
.branch-ending span { font-size: 9px; letter-spacing: .08em; }
.branch-ending.reached { color: var(--red); border-color: var(--gold); background: #f3ead8; filter: none; }
.branch-legend { display: flex; justify-content: center; gap: 20px; margin: 9px 0; font-size: 9px; letter-spacing: .12em; }
.branch-legend span::before { content: ""; display: inline-block; width: 24px; height: 3px; margin-right: 7px; vertical-align: middle; }
.branch-legend .chosen::before { background: var(--gold); }
.branch-legend .unchosen::before { background: #111; }
.branch-legend .current::before { background: var(--red); }
.branch-map-shell { height: calc(100% - 238px); min-height: 340px; border: 1px solid rgba(49,37,22,.28); background: #161b19; box-shadow: inset 0 0 40px rgba(0,0,0,.35); }
.branch-map-toolbar {
  position: relative; z-index: 4; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 12px; color: #d8cfbd; border-bottom: 1px solid rgba(216,186,120,.25); background: rgba(11,20,18,.96);
}
.branch-map-tools { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.branch-map-tools button {
  height: 30px; min-width: 32px; padding: 0 9px; color: #e8dcc2; border: 1px solid rgba(216,186,120,.38);
  background: rgba(255,255,255,.04); cursor: pointer;
}
.branch-map-tools button:hover { color: #171d1a; background: var(--gold-light); }
.branch-map-tools strong { width: 42px; text-align: center; color: var(--gold-light); font-size: 9px; font-weight: 400; }
.branch-map-tools .map-focus-button { width: auto; margin-left: 4px; letter-spacing: .08em; }
.branch-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: #a9a397; font-size: 10px; }
.branch-map {
  position: relative; width: 100%; height: calc(100% - 54px); overflow: auto; overscroll-behavior: contain;
  cursor: grab; touch-action: pan-x pan-y; scrollbar-color: #8e7442 #111715; scrollbar-width: thin;
  background:
    radial-gradient(circle at 50% 50%, rgba(181,138,66,.07), transparent 56%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
}
.branch-map.dragging { cursor: grabbing; user-select: none; }
.branch-sizer { position: relative; }
.branch-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.branch-lines { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.branch-line { fill: none; stroke: #050606; stroke-width: 4; opacity: .86; }
.branch-line.selected { stroke: var(--gold); stroke-width: 5; opacity: 1; filter: drop-shadow(0 0 4px rgba(216,186,120,.45)); }
.branch-line.current { stroke: var(--red); stroke-width: 5; stroke-dasharray: 9 7; animation: routeFlow 1.1s linear infinite; }
@keyframes routeFlow { to { stroke-dashoffset: -32; } }
.map-chapter-label {
  position: absolute; top: 24px; width: 250px; padding-bottom: 9px; color: rgba(216,186,120,.72);
  border-bottom: 1px solid rgba(216,186,120,.25); font-size: 11px; letter-spacing: .2em;
}
.map-chapter-label small { display: block; margin-top: 3px; color: rgba(255,255,255,.28); font-size: 8px; letter-spacing: .12em; }
.branch-node {
  position: absolute; width: 168px; min-height: 100px; padding: 11px 12px; text-align: left; color: #c5bfb3;
  border: 1px solid #4b4b48; background: linear-gradient(135deg, #252a27, #171b19); cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.branch-node:hover, .branch-option:hover { transform: translateY(-3px); z-index: 3; }
.branch-node em {
  position: absolute; left: -16px; top: -16px; display: grid; place-items: center; width: 32px; height: 32px;
  color: #8d8c86; border: 1px solid #585b57; border-radius: 50%; background: #141816; font-size: 9px; font-style: normal;
}
.branch-node span, .branch-node strong, .branch-node small { display: block; }
.branch-node span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #929994; font-size: 10px; letter-spacing: .08em; }
.branch-node strong { margin: 6px 0; color: #e7dfd1; font-size: 15px; letter-spacing: .1em; }
.branch-node small { color: #a0a29d; font-size: 9px; }
.branch-node .map-choice-dots { display: flex; gap: 4px; margin-top: 7px; overflow: visible; white-space: normal; }
.map-choice-dot {
  display: grid; place-items: center; width: 17px; height: 17px; flex: 0 0 17px; color: #9a9b96;
  border: 1px solid #4b504c; border-radius: 50%; background: #0e1210; font-size: 7px; font-style: normal;
}
.map-choice-dot.selected { color: #1d231f; border-color: var(--gold-light); background: var(--gold-light); box-shadow: 0 0 7px rgba(216,186,120,.42); }
.map-choice-dot.fatal { color: #c97068; border-color: #7d3935; }
.map-choice-dot.fatal.selected { color: #fff; background: var(--red); }
.branch-node.visited { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(181,138,66,.12), 0 8px 22px rgba(0,0,0,.28); }
.branch-node.visited em { color: var(--gold-light); border-color: var(--gold); }
.branch-node.current { border: 2px solid var(--red); box-shadow: 0 0 0 5px rgba(141,49,45,.22), 0 0 28px rgba(141,49,45,.3); }
.branch-node.current em { color: #fff3dc; border-color: var(--red); background: var(--red); animation: mapPulse 1.6s ease infinite; }
.branch-node.future { opacity: .58; }
.branch-node.future { cursor: default; filter: grayscale(1); }
.branch-node.future:hover { transform: none; }
.branch-node.future strong { color: #777b77; letter-spacing: .18em; }
@keyframes mapPulse { 50% { box-shadow: 0 0 0 9px rgba(141,49,45,.12); } }
.branch-option {
  position: absolute; width: 128px; min-height: 46px; padding: 8px 9px; overflow: hidden; text-align: left;
  color: #aba9a2; border: 1px solid #343735; background: #0d100f; cursor: pointer; transition: .2s ease;
}
.branch-option::before { content: "◆"; float: left; margin: 1px 6px 10px 0; color: #050606; font-size: 9px; }
.branch-option span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 9px; line-height: 1.55; }
.branch-option small { display: block; margin-top: 3px; color: #646863; font-size: 7px; }
.branch-option.selected { color: #241d12; border-color: var(--gold-light); background: linear-gradient(135deg, #e0c483, #b88b42); box-shadow: 0 0 14px rgba(216,186,120,.28); }
.branch-option.selected::before { color: #fff3cf; }
.branch-option.selected small { color: #55401f; }
.branch-option.available { border-color: #111; }
.branch-option.locked { opacity: .46; }
.branch-option.fatal { border-color: #572d2b; }
.branch-option.fatal::after { content: "殁"; position: absolute; right: 5px; top: 3px; color: #a34843; font-family: "Ma Shan Zheng"; font-size: 15px; }
.branch-ending-node {
  position: absolute; width: 134px; height: 70px; display: grid; grid-template-columns: 38px 1fr; align-items: center;
  padding: 10px; color: #777b77; border: 1px solid #343735; background: #111513; filter: grayscale(1);
}
.branch-ending-node b { display: grid; place-items: center; width: 34px; height: 34px; color: #8b4944; border: 1px solid currentColor; transform: rotate(45deg); font-family: "Ma Shan Zheng"; }
.branch-ending-node b i { transform: rotate(-45deg); font-style: normal; }
.branch-ending-node span { font-size: 10px; letter-spacing: .08em; }
.branch-ending-node.reached { color: #e2cf9e; border-color: var(--gold); filter: none; box-shadow: 0 0 18px rgba(181,138,66,.18); }
.branch-ending-node.death { border-color: #6c302d; }
.ending-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
.ending-card { min-height: 158px; padding: 18px 12px; border: 1px solid rgba(36,74,66,.12); background: #efe8d8; }
.ending-card .seal { margin: 0 auto 13px; display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid var(--red); color: var(--red); transform: rotate(45deg); }
.ending-card .seal span { transform: rotate(-45deg); }
.ending-card h3 { margin: 0 0 7px; font-size: 14px; letter-spacing: .12em; }
.ending-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.ending-card.locked { filter: grayscale(1); opacity: .55; }
.ending-card.locked h3 { letter-spacing: .3em; }
.menu-modal { width: min(430px, 90vw); }
.menu-actions { display: grid; gap: 12px; margin: 28px auto 0; width: 210px; }
.menu-actions .secondary-button { color: var(--jade); background: transparent; border-color: rgba(36,74,66,.3); }
.text-menu-button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 12px; padding: 10px; }
.guide-modal { width: min(520px, 92vw); }
.guide-copy { min-height: 150px; margin: 20px 0; padding: 22px; text-align: left; border-left: 3px solid var(--gold); background: rgba(255,255,255,.45); }
.guide-copy small { display: block; color: var(--gold); font-size: 10px; letter-spacing: .24em; }
.guide-copy p { margin: 10px 0 0; color: #665f55; font-size: 15px; line-height: 1.9; }
.guide-actions { display: flex; justify-content: center; gap: 10px; }
.ending-modal { width: min(680px, 92vw); }
.ending-seal { margin: 24px auto; display: grid; place-items: center; width: 70px; height: 70px; background: var(--red); color: var(--paper-light); font-family: "Ma Shan Zheng"; font-size: 30px; transform: rotate(45deg); }
.ending-modal h2 { font-size: 55px; margin-top: 32px; }
.ending-quote { color: var(--gold); letter-spacing: .14em; font-size: 13px; }
.ending-description { max-width: 500px; margin: 20px auto; color: var(--muted); font-size: 12px; line-height: 2; }
.ending-stats { display: flex; justify-content: center; gap: 25px; margin: 22px 0; }
.ending-stats div span, .ending-stats div strong { display: block; }
.ending-stats span { color: var(--muted); font-size: 9px; }
.ending-stats strong { color: var(--red); font-size: 18px; margin-top: 3px; }
.ending-actions { display: flex; justify-content: center; gap: 12px; }
.ending-actions .secondary-button { color: var(--jade); background: transparent; border-color: rgba(36,74,66,.3); }
.insight-modal {
  width: min(760px, 94vw);
  max-height: 88vh;
  padding: 40px 44px 34px;
  text-align: left;
}
.insight-modal > .eyebrow, .insight-modal > h2, .insight-modal > .modal-lead { text-align: center; }
.insight-modal > h2 { margin: 4px 0 8px; font-size: clamp(34px, 5vw, 52px); }
.insight-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 24px 0 14px;
}
.insight-card {
  padding: 16px 18px; border: 1px solid rgba(36,74,66,.12); border-radius: 14px;
  background: rgba(255,255,255,.45); box-shadow: 0 10px 24px rgba(29,49,44,.06);
}
.insight-card small, .insight-columns h3 {
  display: block; margin: 0 0 8px; color: var(--gold); font-size: 10px; letter-spacing: .18em; font-weight: 700;
}
.insight-card strong { display: block; color: var(--jade); font-size: 22px; letter-spacing: .08em; }
.insight-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.insight-personality { border-color: rgba(129,39,42,.2); background: linear-gradient(135deg, rgba(129,39,42,.08), rgba(255,255,255,.46)); }
.insight-deltas {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 28px; margin: 0 0 18px;
}
.insight-deltas span {
  padding: 7px 10px; border-radius: 999px; color: var(--jade); background: rgba(36,74,66,.08);
  font-size: 12px; letter-spacing: .06em;
}
.insight-deltas span.rise { color: #7c2a2d; background: rgba(129,39,42,.08); }
.insight-deltas span.fall { color: #5f6a64; background: rgba(36,74,66,.06); }
.insight-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 24px; }
.insight-columns section {
  padding: 14px 16px; border-radius: 13px; background: rgba(248,243,232,.7); border: 1px solid rgba(36,74,66,.1);
}
.insight-list { display: grid; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.insight-list p { margin: 0; }
.insight-list b { color: var(--jade); }
.insight-modal .primary-button { margin: 0 auto; }
.toast {
  position: fixed; z-index: 50; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  padding: 10px 18px; color: var(--paper-light); background: var(--deep); font-size: 11px;
  letter-spacing: .12em; opacity: 0; pointer-events: none; transition: .3s ease;
}
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 900px) {
  .game-layout { grid-template-columns: 180px 1fr; }
  .memory-panel { display: none; }
  .origin-list { gap: 10px; }
  .origin-card { padding: 20px 17px; }
}
@media (max-width: 650px) {
  html, body { width: 100%; min-height: 100%; }
  body:has(.game-screen.active) { height: 100dvh; overflow: hidden; }
  .palace-bg .sun { width: 110px; height: 110px; }
  .landing-screen {
    padding: calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
      calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
    background: linear-gradient(90deg, rgba(17,42,37,.9), rgba(17,42,37,.68));
  }
  .landing-copy { margin: auto 0; }
  .landing-copy h1 { font-size: 82px; }
  .landing-actions { flex-direction: column; align-items: flex-start; }
  .landing-records { flex-wrap: wrap; gap: 4px 20px; }
  .landing-footer { flex-wrap: wrap; gap: 7px 10px; }
  .landing-credit { width: 100%; line-height: 1.7; }
  .origin-list { grid-template-columns: 1fr; max-height: 54dvh; overflow-y: auto; overscroll-behavior: contain; }
  .origin-card { min-height: auto; }
  .origin-card p { min-height: auto; }
  .temper-list { grid-template-columns: repeat(2, 1fr); }
  .temper-card { grid-template-columns: 30px 1fr; }
  .consequence-card { margin-top: 3vh; padding: 34px 24px; }
  .setup-screen { min-height: 100dvh; padding: 64px 18px 20px; align-items: flex-start; }
  .setup-wrap { width: 100%; }
  .setup-progress { margin-bottom: 10px; }
  .setup-wrap h2 { font-size: 40px; }
  .setup-page-actions { position: sticky; bottom: 0; padding: 10px 0 calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(238,231,215,.98) 25%); }
  .setup-page-actions .primary-button, .setup-page-actions .secondary-button { min-width: 0; flex: 1; }
  .setup-step > .primary-button { position: sticky; bottom: 0; }
  .name-field em { display: none; }
  .name-field { margin-top: 13vh; width: 100%; }
  .game-header {
    flex: 0 0 calc(62px + env(safe-area-inset-top)); min-height: 0; height: calc(62px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
    grid-template-columns: 1fr auto;
  }
  .game-screen.active { min-height: 0; height: 100dvh; overflow: hidden; }
  .chapter-progress { display: none; }
  .game-layout { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .stats-panel { display: none; }
  .story-stage {
    width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0;
    padding: 24px calc(16px + env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    max-height: none; overflow-y: auto; overscroll-behavior: contain;
  }
  .game-dock {
    flex: 0 0 calc(62px + env(safe-area-inset-bottom)); width: 100%; padding: 4px 7px calc(4px + env(safe-area-inset-bottom));
    border-left: 0; border-right: 0; border-radius: 15px 15px 0 0;
  }
  .game-dock b { width: 27px; height: 27px; }
  .scene-heading { margin-bottom: 14px; }
  .scene-heading span { font-size: 12px; }
  .scene-time-wrap { max-width: 48%; }
  .scene-time-wrap small { font-size: 8px; line-height: 1.4; }
  .scene-notes { margin-bottom: 14px; }
  .place-intro { display: block; padding: 8px 10px; }
  .place-intro b, .place-intro span { display: block; }
  .place-intro span { margin-top: 3px; font-size: 9px; }
  .scene-notes li { grid-template-columns: 54px 1fr; font-size: 9px; }
  .speaker-portrait { width: 44px; height: 44px; }
  .speaker { margin-bottom: 7px; }
  .speaker strong { font-size: 13px; }
  .narration { margin-bottom: 15px; font-size: 13px; line-height: 1.75; }
  .dialogue { margin-bottom: 17px; }
  .dialogue blockquote { padding: 13px 14px; font-size: 16px; line-height: 1.75; }
  .choice-button span { font-size: 18px; }
  .choice-button small { display: none; }
  .dialogue.has-portrait blockquote { margin-left: 8px; }
  .choice-button { min-height: 54px; padding: 13px 42px 13px 14px; touch-action: manipulation; }
  .choices { margin-top: 19px; gap: 8px; }
  .scene-visual { aspect-ratio: 16 / 9; margin-bottom: 17px; }
  .scene-visual figcaption { left: 16px; right: 16px; bottom: 12px; line-height: 1.6; }
  .ending-gallery { grid-template-columns: repeat(2,1fr); }
  .insight-modal { width: 94vw; max-height: 86vh; padding: 34px 18px 24px; overflow-y: auto; }
  .insight-grid, .insight-columns { grid-template-columns: 1fr; gap: 9px; }
  .insight-card { padding: 13px 14px; }
  .insight-card strong { font-size: 19px; }
  .insight-deltas span { font-size: 11px; }
  .secret-modal { width: 98vw; height: 96vh; padding: 0; border-radius: 18px; }
  .secret-modal .modal-close { top: 19px; right: 12px; }
  .secret-app-header { height: 132px; padding: 13px 17px 15px; }
  .secret-statusbar { padding-right: 36px; }
  .secret-statusbar span { display: none; }
  .secret-profile { grid-template-columns: 48px 1fr; gap: 12px; }
  .secret-profile-seal { width: 44px; height: 44px; font-size: 19px; }
  .secret-profile h2 { font-size: 16px; }
  .secret-profile p, .secret-online { display: none; }
  .secret-tabs { height: 58px; padding: 0 8px; }
  .secret-tabs b { font-size: 15px; }
  .secret-tabs span { font-size: 9px; }
  .secret-app-body { height: calc(100% - 190px); }
  .secret-view { padding: 16px 12px 24px; }
  .palace-life-hero h3 { font-size: 24px; }
  .palace-life-hero p { display: none; }
  .palace-level { width: 92px; }
  .palace-feature-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .palace-feature-grid button { padding: 8px 3px; }
  .palace-feature-grid i { width: 30px; height: 30px; }
  .palace-feature-grid small { display: none; }
  .talent-bars { grid-template-columns: 1fr; }
  .palace-resources { flex-wrap: wrap; }
  .role-chat { grid-template-columns: 1fr; }
  .chat-roles { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .chat-role { flex: 0 0 135px; }
  .chat-role.compact { flex-basis: 68px; }
  .chat-window { min-height: 360px; }
  .chat-form { grid-template-columns: 1fr; }
  .chat-bubble { max-width: 90%; }
  .summon-overlay { padding: 30px 20px; }
  .summon-overlay h3 { font-size: 27px; }
  .secret-dashboard { grid-template-columns: 1fr 1fr; }
  .secret-score:last-child { display: none; }
  .secret-score { min-height: 76px; }
  .secret-home-preview button { grid-template-columns: 76px 1fr 12px; }
  .secret-page-heading { align-items: start; }
  .secret-page-heading p { max-width: 46%; text-align: right; line-height: 1.5; }
  .secret-letter-list .letter-card { width: 94%; padding-left: 50px; }
  .free-action-form { grid-template-columns: 1fr; }
  .free-action-form button { min-height: 40px; }
  .schedule-actions { grid-template-columns: repeat(2, 1fr); }
  .romance-candidates { grid-template-columns: repeat(2, 1fr); }
  .branch-modal { width: 98vw; height: 96vh; padding: 26px 10px 12px; }
  .branch-modal > .eyebrow { display: none; }
  .branch-modal > h2 { font-size: 30px; }
  .branch-modal > .modal-lead { font-size: 9px; }
  .branch-current { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .branch-endings { grid-template-columns: repeat(4, 1fr); }
  .branch-ending { min-height: 38px; grid-template-columns: 20px 1fr; }
  .branch-ending b { font-size: 14px; }
  .branch-map-shell { height: calc(100% - 248px); }
  .branch-map-toolbar { height: 48px; padding: 7px; }
  .branch-map { height: calc(100% - 48px); }
  .branch-detail { display: none; }
  .branch-map-tools { width: 100%; justify-content: center; }
  .modal { padding: 36px 20px; }
  .ending-actions { flex-direction: column; align-items: center; }
}
@media (hover: none) and (pointer: coarse) {
  .choice-button:hover {
    color: var(--ink); border-color: rgba(36,74,66,.18);
    background: rgba(255,252,245,.88); transform: none;
  }
  .choice-button.locked:hover { background: rgba(248,243,232,.82); }
}