/* ========== 神秘复苏 v1.4 暗黑恐怖主题 ========== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#080808;
  --bg2:#0f0f0f;
  --panel:#141414;
  --border:#2a2a2a;
  --border2:#3a3a3a;
  --text:#c8c8c8;
  --dim:#6a6a6a;
  --blood:#8b0000;
  --blood2:#c41e1e;
  --gold:#d4a017;
  --green:#3ddc84;
  --orange:#ff8c00;
  --red:#ff4444;
}
html,body{height:100%}
body{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(139,0,0,0.08) 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--gold);text-decoration:none}
a:hover{color:#ffd75e}

/* ===== 布局 ===== */
.app{max-width:860px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,0.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:8px 16px;
  display:flex;align-items:center;gap:10px;
}
.topbar .logo{font-size:16px;font-weight:800;letter-spacing:3px;color:var(--blood2);text-shadow:0 0 12px rgba(196,30,30,0.4)}
.topbar .nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.topbar .nav button,.topbar .back{
  background:var(--panel);border:1px solid var(--border);color:var(--text);
  padding:5px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .15s;
}
.topbar .nav button:hover,.topbar .back:hover{border-color:var(--blood2);color:var(--blood2)}
.topbar .nav button.active{background:var(--blood);border-color:var(--blood);color:#fff}

/* ===== 日志 ===== */
.log-item{padding:6px 8px;border-bottom:1px dashed var(--border);display:flex;gap:8px}
.log-item .d{color:var(--dim);font-size:11px;white-space:nowrap;flex-shrink:0}

.content{flex:1;padding:16px;display:flex;flex-direction:column;gap:16px}
.page-title{font-size:20px;font-weight:700;color:var(--blood2);letter-spacing:2px;margin-bottom:4px}
.page-sub{font-size:12px;color:var(--dim);margin-bottom:12px}
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:16px;margin-bottom:12px;
}
.card h3{font-size:15px;color:var(--blood2);margin-bottom:8px;letter-spacing:1px}
.card h4{font-size:13px;color:var(--gold);margin:10px 0 4px}
.card .dim{color:var(--dim);font-size:13px}

/* ===== 状态面板 ===== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.stat-cell{
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;
}
.stat-cell .k{font-size:11px;color:var(--dim)}
.stat-cell .v{font-size:14px;font-weight:600;color:var(--text)}
.stat-cell .v.good{color:var(--green)}
.stat-cell .v.warning{color:var(--orange)}
.stat-cell .v.danger{color:var(--red);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* 复苏进度条 */
.bar{height:10px;background:#1a1a1a;border-radius:5px;overflow:hidden;margin:4px 0}
.bar>div{height:100%;transition:width .4s}
.bar.red>div{background:linear-gradient(90deg,#7a1010,var(--red))}
.bar.orange>div{background:linear-gradient(90deg,#8a4a00,var(--orange))}
.bar.green>div{background:linear-gradient(90deg,#0a5a2a,var(--green))}

/* ===== 按钮 ===== */
.btn{
  display:inline-block;padding:10px 18px;border-radius:8px;border:1px solid var(--border2);
  background:var(--panel);color:var(--text);font-size:14px;cursor:pointer;transition:all .15s;
  text-align:center;
}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.primary{background:var(--blood);border-color:var(--blood);color:#fff}
.btn.primary:hover{background:var(--blood2);color:#fff}
.btn.gold{background:#1a1405;border-color:var(--gold);color:var(--gold)}
.btn.gold:hover{background:#241c08}
.btn.danger{background:#1a0505;border-color:var(--red);color:var(--red)}
.btn.danger:hover{background:#2a0808}
.btn.dim{opacity:.6}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px}
.btn-block{display:block;width:100%;margin-bottom:8px}

/* ===== 表单 ===== */
.input{
  width:100%;padding:10px 14px;border-radius:8px;border:1px solid var(--border2);
  background:var(--bg2);color:var(--text);font-size:15px;outline:none;transition:border .15s;
}
.input:focus{border-color:var(--gold)}
.input::placeholder{color:#444}
.select{
  width:100%;padding:10px 14px;border-radius:8px;border:1px solid var(--border2);
  background:var(--bg2);color:var(--text);font-size:15px;outline:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px;background-repeat:no-repeat;
}
label.field{display:block;margin-bottom:12px}
label.field .lbl{font-size:13px;color:var(--dim);margin-bottom:4px;display:block}

/* ===== 选项网格 ===== */
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:480px){.opt-grid{grid-template-columns:1fr}}
.opt{
  padding:12px 14px;border-radius:8px;border:1px solid var(--border2);background:var(--bg2);
  cursor:pointer;transition:all .15s;text-align:left;font-size:14px;color:var(--text);
}
.opt:hover{border-color:var(--gold);background:#1a1405}
.opt.sel{border-color:var(--gold);background:#241c08;color:var(--gold)}
.opt .t{font-weight:600}
.opt .d{font-size:11px;color:var(--dim);margin-top:2px}
.opt .tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle}
.tag.good{background:rgba(61,220,132,.15);color:var(--green)}
.tag.warn{background:rgba(255,140,0,.15);color:var(--orange)}
.tag.bad{background:rgba(255,68,68,.15);color:var(--red)}

/* ===== 剧情显示 ===== */
.story-box{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:18px;min-height:200px;max-height:52vh;overflow-y:auto;
  font-size:15px;line-height:1.9;
}
.story-box::-webkit-scrollbar{width:5px}
.story-box::-webkit-scrollbar-thumb{background:#333;border-radius:3px}
.story-box .narr{color:#d0d0d0;margin-bottom:8px}
.story-box .sys{color:var(--blood2);font-weight:700;margin-bottom:8px;letter-spacing:1px}
.story-box .dlg{color:#8ab4d8;margin-bottom:8px;border-left:2px solid #335;padding-left:8px}
.story-box .info{color:var(--orange);margin-bottom:8px}
.story-box .warning{color:var(--orange);margin-bottom:8px}
.story-box .good{color:var(--green);margin-bottom:8px}
.story-box .bad{color:var(--red);margin-bottom:8px;font-weight:600}
.story-box .hr{border:none;border-top:1px dashed #333;margin:10px 0}
.story-box .typing{animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* 选择按钮 */
.choice-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.choice-btn{
  text-align:left;padding:12px 14px;border-radius:8px;
  border:1px solid var(--border2);background:var(--panel);color:var(--text);
  font-size:14px;cursor:pointer;transition:all .15s;
}
.choice-btn:hover{border-color:var(--blood2);background:#1c0a0a;transform:translateX(4px)}
.choice-btn .idx{color:var(--blood2);font-weight:700;margin-right:8px}

/* ===== 背包/列表 ===== */
.item-row{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;
  border:1px solid var(--border);background:var(--bg2);margin-bottom:8px;
}
.item-row .ic{
  width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:#1a1a1a;border:1px solid var(--border);
}
.item-row .info{flex:1;min-width:0}
.item-row .info .nm{font-weight:600;font-size:14px}
.item-row .info .ds{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-row .qty{color:var(--dim);font-size:13px}
.item-row .actions{display:flex;gap:6px;flex-wrap:wrap}

/* ===== 城市卡片 ===== */
.city-card{
  padding:14px;border-radius:10px;border:1px solid var(--border);background:var(--panel);
  cursor:pointer;transition:all .15s;margin-bottom:10px;
}
.city-card:hover{border-color:var(--gold)}
.city-card.sel{border-color:var(--gold);background:#1a1405}
.city-card .row1{display:flex;align-items:center;gap:8px}
.city-card .nm{font-weight:700;font-size:15px}
.city-card .stars{color:var(--gold);font-size:12px}
.city-card .type{font-size:11px;color:var(--dim);margin-left:auto}
.city-card .desc{font-size:12px;color:var(--dim);margin-top:4px}
.city-card .tip{font-size:11px;color:var(--orange);margin-top:4px}

/* ===== 图鉴 ===== */
.tabbar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabbar .tab{
  padding:7px 16px;border-radius:20px;border:1px solid var(--border2);background:var(--panel);
  color:var(--dim);font-size:13px;cursor:pointer;transition:all .15s;
}
.tabbar .tab:hover{color:var(--text)}
.tabbar .tab.active{background:var(--blood);border-color:var(--blood);color:#fff}
.filter-row{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.filter-row .chip{padding:4px 12px;border-radius:16px;border:1px solid var(--border2);font-size:12px;cursor:pointer;background:var(--panel);color:var(--dim)}
.filter-row .chip.active{background:var(--gold);border-color:var(--gold);color:#000;font-weight:600}

.ghost-card,.item-card,.city-detail,.npc-card{
  background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;
}
.ghost-card .head,.item-card .head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px}
.badge.C{background:rgba(61,220,132,.15);color:var(--green)}
.badge.B{background:rgba(61,140,220,.15);color:#4aa3e0}
.badge.A{background:rgba(255,140,0,.15);color:var(--orange)}
.badge.S{background:rgba(255,68,68,.2);color:var(--red)}
.badge.item{background:rgba(212,160,23,.15);color:var(--gold)}
.ghost-card .rule,.item-card .desc,.city-detail .desc,.npc-card .note{font-size:13px;color:var(--dim);margin-top:4px}
.ghost-card .hole{font-size:13px;color:var(--green);margin-top:4px}
.ghost-card .ab{font-size:13px;color:var(--orange);margin-top:4px}

/* ===== 背包/商店 列表行 ===== */
.inv-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);margin-bottom:8px}
.inv-row .inv-main{flex:1;min-width:0}
.inv-row .nm{font-weight:600;font-size:14px}
.inv-row .nm .qty{color:var(--dim);font-size:12px}
.inv-row .d{font-size:11px;color:var(--dim);display:block;margin-top:2px}
.inv-row .d.good{color:var(--green)}
.inv-row .d.bad{color:var(--red)}
.inv-row .inv-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inv-row .price{font-size:13px;color:var(--gold);white-space:nowrap}
.inv-row .ghost-price{color:var(--orange)}

/* ===== 装备行 ===== */
.equip-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);margin-bottom:8px}
.equip-row .eq-item{flex:1;min-width:0}
.equip-row .eq-item .nm{font-weight:600;font-size:14px}
.equip-row .eq-item .d{font-size:11px;color:var(--dim);display:block;margin-top:2px}
.equip-row .eq-item .d.good{color:var(--green)}

/* ===== 图鉴条目 ===== */
.ghost-entry{padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);margin-bottom:8px}
.ghost-entry .ghead{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.ghost-entry .ghead .nm{font-weight:600;font-size:14px}
.ghost-entry .d{font-size:12px;color:var(--dim);margin-top:2px}
.ghost-entry .d.bad{color:var(--red)}
.ghost-entry .d.good{color:var(--green)}

.tag.lv-C{background:rgba(61,220,132,.15);color:var(--green)}
.tag.lv-B{background:rgba(61,140,220,.15);color:#4aa3e0}
.tag.lv-A{background:rgba(255,140,0,.15);color:var(--orange)}
.tag.lv-S{background:rgba(255,68,68,.2);color:var(--red)}

/* ===== 小按钮变体 ===== */
.btn.small{padding:5px 12px;font-size:12px;border-radius:6px}
.btn.ghost{border-style:dashed;border-color:var(--border2);color:var(--dim)}
.btn.ghost:hover{border-color:var(--orange);color:var(--orange)}
.choice-btn.primary{border-color:var(--blood);background:#1c0a0a;color:var(--blood2);font-weight:700}

/* ===== 说明列表 ===== */
.rules{padding-left:18px}
.rules li{margin-bottom:6px;font-size:14px;color:#d0d0d0}

/* ===== 标题页 ===== */
.title-screen{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(139,0,0,0.15) 0%, transparent 60%),
    var(--bg);
}
.title-screen .title{
  font-size:44px;font-weight:900;letter-spacing:8px;color:var(--blood2);
  text-shadow:0 0 30px rgba(196,30,30,0.5);
}
@media(max-width:480px){.title-screen .title{font-size:32px;letter-spacing:5px}}
.title-screen .sub{font-size:14px;color:var(--dim);letter-spacing:3px;margin-top:6px;margin-bottom:40px}
.title-screen .menu{width:100%;max-width:280px;display:flex;flex-direction:column;gap:10px}
.title-screen .credit{position:fixed;bottom:14px;width:100%;text-align:center;font-size:11px;color:#333}

/* ===== 模态 ===== */
.modal-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-mask.show{display:flex}
.modal{
  background:var(--bg2);border:1px solid var(--border2);border-radius:12px;
  width:100%;max-width:520px;max-height:80vh;overflow-y:auto;padding:20px;
}
.modal .m-title{font-size:18px;color:var(--blood2);font-weight:700;margin-bottom:12px;letter-spacing:2px}
.modal-close{float:right;background:none;border:none;color:var(--dim);font-size:22px;cursor:pointer}

/* ===== 移动端适配 ===== */
@media(max-width:480px){
  body{font-size:14px}
  .content{padding:12px}
  .topbar{padding:6px 10px}
  .topbar .logo{font-size:13px;letter-spacing:2px}
  .topbar .nav button{padding:4px 8px;font-size:11px}
  .card{padding:12px}
  .story-box{padding:14px;font-size:14px;max-height:48vh}
}