:root{--paper:#f6efe2;--ink:#2b2118;--red:#a8322d;--gold:#c79a3c;--muted:#8a7a62;--card:#fffaf0;--line:#e3d6bf;--safe:#3f7d5a;--risk:#b0413e;--spec:#7a5aa8}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#1c1610;color:var(--ink);font-family:"PingFang SC","Noto Serif SC","Songti SC","Microsoft YaHei",serif}
#app{max-width:480px;min-height:100%;margin:0 auto;background:var(--paper);position:relative;display:flex;flex-direction:column}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
.btn{display:block;width:100%;padding:13px 16px;border:none;border-radius:10px;background:var(--red);color:#fff;font-size:16px;letter-spacing:2px}
.btn.ghost{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn.gold{background:linear-gradient(135deg,#d9ae55,#a87b25)}
.btn:disabled{opacity:.5}
input,textarea{font-family:inherit;font-size:16px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.page{padding:20px 18px 28px;flex:1}
.brand{text-align:center;margin:36px 0 26px}
.brand h1{font-size:34px;margin:0;letter-spacing:8px;color:var(--red)}
.brand p{color:var(--muted);margin:8px 0 0;font-size:13px;letter-spacing:2px}
.form>*{margin-bottom:12px}
.link{color:var(--red);text-align:center;font-size:14px;cursor:pointer}
.err{color:var(--risk);font-size:13px;min-height:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--ink);color:#f1e5cc;font-size:13px;position:sticky;top:0;z-index:5}
.topbar b{color:var(--gold)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px;box-shadow:0 2px 6px rgba(60,40,10,.06)}
.scn{background:linear-gradient(160deg,#3a2b1e,#6b3a2a);color:#f6e8cc;border:none}
.scn h3{margin:0 0 6px;font-size:20px;letter-spacing:2px}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.15);margin-bottom:8px}
.intro p{text-indent:2em;line-height:1.95;margin:0 0 10px;font-size:16px}
.intro .q{text-align:center;font-size:18px;color:var(--red);margin:22px 0;text-indent:0;font-weight:bold}
.row{display:flex;gap:10px}
.row>*{flex:1}
/* 游戏界面 */
.hud{position:sticky;top:41px;z-index:4;background:#efe3cc;border-bottom:1px solid var(--line);box-shadow:0 2px 6px rgba(60,40,10,.08)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 10px 4px}
.stat{background:#fffaf0;border-radius:8px;padding:5px 7px;font-size:12px;display:flex;justify-content:space-between;align-items:center;transition:background .4s}
.stat .v{font-weight:bold;font-size:14px}
.stat.up{background:#dff0e3}.stat.down{background:#f7dcd9}
.stat.low .v{color:var(--risk)}
.portraits{display:flex;gap:8px;overflow-x:auto;padding:4px 10px 6px}
.pt{flex:0 0 48px;text-align:center;font-size:11px;cursor:pointer}
.pt img{width:48px;height:60px;object-fit:cover;border-radius:8px;border:2px solid var(--line);background:#eee}
.pt.here img{border-color:var(--gold)}
.log{padding:6px 16px 8px;flex:1}
.para{line-height:1.95;font-size:16px;margin:0 0 14px;white-space:pre-wrap;animation:fadein .5s}
.me{color:var(--muted);font-size:14px;border-left:3px solid var(--gold);padding-left:8px;margin:0 0 12px}
.applied{font-size:12px;color:var(--muted);margin:-6px 0 14px}
.applied span{margin-right:8px}
.applied .p{color:var(--safe)}.applied .n{color:var(--risk)}
.choices{padding:4px 14px}
.choice{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;background:#fffaf0;border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:8px;font-size:15px;line-height:1.5;color:var(--ink)}
.choice .s{flex:0 0 auto;font-size:11px;color:#fff;border-radius:4px;padding:1px 6px;margin-top:3px;background:var(--muted)}
.s-谨慎{background:var(--safe)!important}.s-冒险{background:var(--risk)!important}.s-投机{background:var(--spec)!important}
.inputbar{position:sticky;bottom:0;background:#efe3cc;border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px}
.inputbar input{flex:1}
.inputbar button{flex:0 0 72px;border:none;border-radius:8px;background:var(--red);color:#fff;font-size:15px}
.thinking{color:var(--muted);font-size:14px;padding:0 16px 10px}
.thinking::after{content:'…';animation:dots 1.2s infinite}
@keyframes dots{0%{content:'·'}33%{content:'··'}66%{content:'···'}}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
#toasts{position:fixed;top:200px;left:50%;transform:translateX(-50%);z-index:50;pointer-events:none;width:300px}
.toast{background:rgba(43,33,24,.92);color:#fff;border-radius:18px;padding:7px 14px;margin:0 auto 6px;font-size:14px;text-align:center;animation:floatup 2.8s forwards;width:max-content;max-width:300px}
.toast .p{color:#9be0b0}.toast .n{color:#ff9e98}
@keyframes floatup{0%{opacity:0;transform:translateY(10px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
#modal .box{background:var(--paper);border-radius:14px;max-width:420px;width:100%;padding:18px;max-height:85vh;overflow:auto}
.npc-card{display:flex;gap:12px}
.npc-card img{width:110px;height:138px;object-fit:cover;border-radius:10px}
.bar{height:6px;background:#e5d9c3;border-radius:3px;position:relative;margin:4px 0 8px}
.bar i{position:absolute;top:0;bottom:0;border-radius:3px}
/* 结局 */
.ending{background:radial-gradient(circle at 50% 0,#4a2a22,#140e0a);color:#f3e6cc;min-height:100%;padding:34px 22px}
.ending h2{text-align:center;font-size:30px;letter-spacing:8px;color:#e8c070;margin:10px 0}
.ending .cause{text-align:center;color:#d9b9a0;margin-bottom:20px}
.ending .txt{line-height:2;white-space:pre-wrap}
.recap{background:rgba(255,255,255,.06);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.8;margin:20px 0}
.book{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bk{border-radius:10px;padding:10px 6px;text-align:center;font-size:13px;background:#e9dfcc;color:#a89a80;min-height:74px}
.bk.on{background:linear-gradient(160deg,#5a3325,#2b1a12);color:#f1d9a6}
.bk small{display:block;font-size:11px;margin-top:4px;opacity:.8}
.plan{border:2px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--card)}
.plan h3{margin:0 0 4px}.plan .price{font-size:26px;color:var(--red);font-weight:bold}
.quota-tip{font-size:13px;color:var(--muted);text-align:center;margin:8px 0}
/* 穿越动画 */
#warp{position:fixed;inset:0;width:100vw;height:100vh;z-index:100;background:#000}
#warptext{position:fixed;inset:0;z-index:101;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:22px;letter-spacing:6px;pointer-events:none;text-shadow:0 0 12px #ffd27a}
#warptext div{opacity:0;animation:wt 1.6s forwards}
#warptext div:nth-child(2){animation-delay:1.5s;font-size:26px;color:#ffe3a3}
@keyframes wt{0%{opacity:0;transform:scale(.9)}30%{opacity:1;transform:none}85%{opacity:1}100%{opacity:.0}}