* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #2b2b2b; color: #2a241c;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  display: flex; justify-content: center; min-height: 100vh;
}
.phone {
  width: 100%; max-width: 414px; min-height: 100vh;
  background: #efe7d3;
  background-image: radial-gradient(transparent 60%, rgba(0,0,0,.04));
  padding: 20px 18px; position: relative;
}

.legacy {
  font-size: 11px; color: #6b5a38; text-align: center; line-height: 1.5;
  background: rgba(107,31,31,.06); border: 1px dashed #c2a878;
  border-radius: 6px; padding: 5px 8px; margin-bottom: 10px;
}

.progress { text-align: center; font-size: 12px; color: #a8997a; margin-bottom: 6px; }
.progress .step { padding: 0 2px; }
.progress .step.done { color: #6b1f1f; }
.progress .step.cur { color: #6b1f1f; font-weight: bold; border-bottom: 2px solid #b8860b; }
.progress i { color: #c2b48f; font-style: normal; margin: 0 1px; }

.realm { font-size: 20px; letter-spacing: 2px; text-align: center; margin-bottom: 16px; color: #6b1f1f; }

.meter { margin-bottom: 14px; }
.meter-label { font-size: 13px; margin-bottom: 4px; }
.bar { position: relative; height: 14px; background: #d8cdb2; border-radius: 7px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: #6b1f1f; transition: width .35s ease; }
.life .bar > span { background: #3a6b3a; }
.p-bar { overflow: visible; }
.p-bar > span { background: linear-gradient(90deg,#8a6d3b,#c8a86b); border-radius: 7px; }
.mark { position: absolute; top: -3px; width: 2px; height: 20px; }
.mark.cap { background: #999; }
.mark.t { background: #6b1f1f; }
.tracks {
  font-size: 12px; margin-top: 6px; color: #5a4d33;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
}
.tracks .tk-row {
  display: flex; align-items: baseline; gap: 4px;
  border-bottom: 1px dotted rgba(168,153,122,.4);
  padding: 1px 0;
}
.tracks .tk-main { color: #4a3f2c; font-weight: 600; flex: 0 0 auto; }
.tracks .tk-tail { font-style: normal; color: #8a7a55; font-size: .92em; flex: 1; }
.tracks .tk-hint { color: #a8997a; font-size: .85em; }

.realization { margin: 4px 0 12px; }
.realization .meter-label { font-size: 14px; color: #6b1f1f; font-weight: 700; letter-spacing: 1px; }
.realization .ripe { color: #b8860b; font-style: normal; font-weight: 700; margin-left: 8px; }
.realization .bar3 {
  position: relative; display: flex; gap: 4px;
  height: 19px; padding-right: 22px;
}
.realization .bar3 .seg {
  flex: 1; background: #b8a878;
  border: 1.5px solid #8a7a55; border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.realization .bar3 .seg > span {
  display: block; height: 100%;
  background: linear-gradient(90deg,#5a8e4f,#b8c97a,#c9962b);
  transition: width .35s ease;
}
.realization .bar3 .seg.lit { border-color: #6b5a3a; }
.realization .bar3 .ripe-mark {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 16px; font-style: normal; color: #c2a878;
  font-weight: 700; line-height: 1;
}
.realization.ripe .bar3 .seg { border-color: #c9962b; }
.realization.ripe .bar3 .ripe-mark {
  color: #c9962b; text-shadow: 0 0 8px rgba(201,150,43,.8);
}
.hint { font-size: 12px; color: #8a7a55; font-style: italic; text-align: center; margin: 6px 0 12px; }

.rstat { text-align: center; font-size: 15px; margin: 10px 0 4px; }
.rstat b { color: #6b1f1f; font-size: 19px; }
.nudge { text-align: center; font-size: 13px; color: #8a7a55; font-style: italic; margin-bottom: 12px; }
.bag { font-size: 12px; color: #5a4d33; text-align: center; margin-bottom: 14px; }
.bag.mats { text-align: left; margin-bottom: 12px; }
.bag-title { font-size: 11px; opacity: .65; margin-bottom: 3px; }
.mat-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 2px 0; }
.mat-row > b { color: #5a4d33; margin-right: 2px; }
.mat { font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor; }

.lh-黯白 { color: #9a9a9a; }
.lh-灵青 { color: #2f8fa6; }
.lh-法蓝 { color: #3f6fe6; }
.lh-宝紫 { color: #8a4cd0; }
.lh-仙金 { color: #c9962b; }
.lh-仙赤 { color: #d8412a; }

.stats {
  border: 1px solid #c2a878; border-radius: 8px;
  background: rgba(255,255,255,.18);
  padding: 14px 14px 12px; margin-bottom: 12px;
}
.stats > :last-child { margin-bottom: 0; }
.stats .meter:last-of-type { margin-bottom: 0; }

.axes-head {
  margin: -4px -4px 12px;
  padding: 10px 10px 8px;
  background: rgba(107,31,31,.04);
  border: 1px solid #c2a878;
  border-radius: 6px;
}
.axes-head > .meter:last-of-type { margin-bottom: 0; }
.axes-head .realization { margin: 0 0 12px; }
.stats .sect-rank {
  text-align: left; letter-spacing: 0; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px dashed #d8cdb2;
}
.stats .rstat { margin: 12px 0 10px; }
.stats .bag { text-align: left; margin-bottom: 8px; }
.bottle-row { font-size: 12px; color: #5a4d33; }

.green-drops { font-size: 12px; color: #5a4d33; text-align: center; margin: 6px 0 12px; }
.green-drops b { color: #3a8e4f; font-size: 13px; font-weight: 700; }
.green-drops .drops { display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: middle; }
.green-drops .drop { font-size: 11px; opacity: .25; filter: grayscale(.6); font-style: normal; }
.green-drops .drop.lit { opacity: 1; filter: none; }
.herb-bar {
  position: relative; height: 10px; margin: 6px 0 10px;
  background: #d8cdb2; border: 1px solid #a8997a; border-radius: 5px; overflow: hidden;
}
.herb-bar > span {
  display: block; height: 100%; transition: width .35s ease;
  background: linear-gradient(90deg,#5a8e4f,#b8c97a);
}

.actions { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; justify-content: center; }
.actions.col { flex-direction: column; }
button {
  flex: 1 1 auto; padding: 10px 8px; font-family: inherit; font-size: 14px;
  background: #efe7d3; color: #2a241c; border: 1px solid #6b1f1f; border-radius: 6px; cursor: pointer;
}
button:hover { background: #e3d8bd; }
button.big { background: #6b1f1f; color: #f3ead4; font-size: 16px; letter-spacing: 2px; }
button.ghost { border-style: dashed; color: #6b1f1f; }

.flash {
  font-size: 13px; color: #4a3f2c; text-align: center; line-height: 1.5;
  background: #f3ead4; border-left: 3px solid #b8860b;
  border-radius: 4px; padding: 7px 10px; margin-bottom: 10px;
  animation: flashin .35s ease;
}
@keyframes flashin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.delve-banner {
  background: linear-gradient(180deg, #5a3a1f 0%, #4a2f1a 100%); color: #f3ead4;
  border: 1px solid #b8860b; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px;
  text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.18);
  animation: flashin .35s ease;
}
.delve-title { font-size: 14px; letter-spacing: 1.5px; margin-bottom: 4px; color: #ffd56b; }
.delve-loot { font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.delve-rare { font-size: 12px; color: #6ec4ff; margin-bottom: 6px; }
.delve-rare b { color: #9bd6ff; }
.delve-banner button { background: #f3ead4; color: #5a3a1f; padding: 4px 12px; font-size: 12px; }

.log {
  margin-top: 14px; border-top: 1px dashed #c2a878; padding-top: 8px;
}
.log-head { font-size: 12px; color: #a8997a; text-align: center; margin-bottom: 6px; letter-spacing: 2px; }
.log ul { list-style: none; max-height: 168px; overflow-y: auto; }
.log li {
  font-size: 12px; color: #5a4d33; line-height: 1.6;
  padding: 3px 6px; border-bottom: 1px solid rgba(194,168,120,.25);
}
.log li:first-child { color: #6b1f1f; }
.log .rep { color: #b8860b; font-style: normal; font-size: 11px; font-weight: 700; margin-left: 4px; }

.opening { padding-top: 40px; animation: fadein .5s ease; }
.op-title { font-size: 19px; letter-spacing: 2px; color: #6b1f1f; text-align: center; margin-bottom: 16px; }
.op-text { font-size: 14px; color: #4a3f2c; line-height: 1.9; margin-bottom: 22px; padding: 0 6px; }
.encounter.sect .enc-title { color: #5a4d33; }

.encounter.story {
  background: rgba(58,74,90,.04);
  border-left: 3px solid #3a4a5a;
  border-radius: 6px;
  padding: 14px 14px 10px;
  margin: 24px 0 12px;
}
.encounter.story .story-tag {
  display: inline-block;
  font-size: 11px; letter-spacing: 2px;
  color: #3a4a5a; background: rgba(58,74,90,.1);
  border: 1px solid #3a4a5a; border-radius: 3px;
  padding: 1px 8px; margin-bottom: 10px;
}
.encounter.story .enc-title { color: #2a3a4a; font-style: italic; }
.encounter.story .character {
  font-size: 11px; color: #6b5a3a;
  text-align: right; margin-top: 10px;
  font-style: italic; letter-spacing: 3px;
}

.sect-rank { font-size: 12px; color: #6b1f1f; text-align: center; margin-bottom: 10px; letter-spacing: 1px; }
.exchange { padding-top: 30px; animation: fadein .5s ease; }
.ex-title { font-size: 18px; color: #6b1f1f; text-align: center; margin-bottom: 8px; letter-spacing: 2px; }
.ex-bal { font-size: 13px; color: #5a4d33; text-align: center; margin-bottom: 18px; }
.exchange button.locked { opacity: .4; }

button.locked, button[disabled].locked {
  background: #d8cdb2; color: #6b5a3a;
  border: 1px dashed #a8997a; letter-spacing: 1px;
  cursor: not-allowed; opacity: .75;
}

.trib-framing {
  font-size: 12px; color: #6b1f1f; text-align: center; line-height: 1.6;
  background: rgba(107,31,31,.06); border: 1px dashed #b8860b;
  border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; font-style: italic;
}

.commission { padding-top: 24px; animation: fadein .5s ease; }
.cm-title { font-size: 18px; color: #6b1f1f; text-align: center; margin-bottom: 8px; letter-spacing: 2px; }
.cm-bal { font-size: 13px; color: #5a4d33; text-align: center; margin-bottom: 14px; }
.cm-sec { font-size: 12px; color: #a8997a; letter-spacing: 2px; margin: 12px 0 6px; border-top: 1px dashed #c2a878; padding-top: 8px; }

.act-grp { font-size: 12px; color: #a8997a; letter-spacing: 4px; margin: 10px 0 4px; padding-top: 6px; border-top: 1px dashed #c2a878; text-align: left; }
.act-grp:first-of-type { border-top: none; padding-top: 0; }
.cm-order {
  font-size: 13px; color: #4a3f2c; line-height: 1.6;
  background: rgba(255,255,255,.22); border: 1px solid #c2a878;
  border-radius: 6px; padding: 8px 10px; margin-bottom: 8px;
}
.cm-order .actions { margin: 6px 0 0; }
.commission-row { font-size: 12px; color: #5a4d33; }

.pds-cue { border-color: #3a4a5a; color: #2a3a4a; background: #e6ebef; font-style: italic; }
.pds-cue:hover { background: #d8e0e6; }
.encounter.peidanshi .enc-title { color: #3a4a5a; letter-spacing: 3px; }

.grudge-hint { font-size: 12px; color: #7a4a2a; text-align: center; font-style: italic; margin-bottom: 10px; }

.grudge-hint.warm { color: #b58957; }
.encounter.olddebt .enc-title { color: #8a2a2a; }

.encounter { padding-top: 30px; }
.enc-title { font-size: 17px; color: #6b1f1f; text-align: center; margin-bottom: 12px; }
.talk { font-size: 13px; color: #8a7a55; text-align: center; margin-bottom: 16px; }

button .rate { color: #b8860b; font-weight: 700; font-style: normal; margin-left: 4px; font-size: .92em; }
button.big .rate { color: #f3ead4; }

.ending { text-align: center; padding-top: 60px; animation: fadein .6s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ending.ascend .cry {
  font-size: 30px; letter-spacing: 4px; color: #b8860b; margin-bottom: 20px;
  text-shadow: 0 0 16px rgba(200,168,107,.8); animation: glow 1.2s ease infinite alternate;
}
@keyframes glow { from { text-shadow: 0 0 8px rgba(200,168,107,.5); } to { text-shadow: 0 0 24px rgba(200,168,107,1); } }
.ending .next { font-size: 12px; color: #8a7a55; margin: 16px 0 24px; }
.ending.dead .tomb { font-size: 56px; color: #3a3a3a; margin-bottom: 16px; }
.ending.dead .epitaph { font-size: 16px; color: #4a3f2c; margin-bottom: 28px; line-height: 1.7; padding: 0 10px; }
.ending button { flex: 0 0 auto; padding: 12px 24px; }

.epitaph-card {
  border: 1px solid #c8a86b; background: #fbf6e8; border-radius: 8px;
  padding: 16px 14px; margin: 0 10px 18px; text-align: left;
  box-shadow: 0 2px 8px rgba(120,90,40,0.15);
}
.epitaph-card .card-title { font-size: 16px; font-weight: 700; color: #4a3f2c; text-align: center; margin-bottom: 10px; }
.epitaph-card .mirror { font-size: 13px; color: #6b5a3a; text-align: center; margin: 6px 0 12px; font-style: italic; }
.epitaph-card ul.stats { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; color: #5a4a2a; }
.epitaph-card ul.stats li { margin: 3px 0; }
.epitaph-card .picks { margin-top: 12px; }
.epitaph-card .picks-title { font-size: 12px; color: #8a7a55; margin-bottom: 6px; border-top: 1px dashed #c8a86b; padding-top: 8px; }
.epitaph-card .picks ul { list-style: none; padding: 0; margin: 0; font-size: 13px; color: #4a3f2c; }
.epitaph-card .picks li { margin: 4px 0; line-height: 1.5; }
.epitaph-card .year { color: #8a7a55; margin-right: 6px; font-variant-numeric: tabular-nums; }
.epitaph-card .tag { color: #b8860b; font-style: normal; font-size: 11px; }
.epitaph-card .epitaph-line { font-size: 14px; color: #3a2f1c; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #c8a86b; line-height: 1.6; }
.chronicle { margin: 0 10px 16px; text-align: left; font-size: 13px; color: #4a3f2c; }
.chronicle summary { color: #8a7a55; cursor: pointer; margin-bottom: 8px; }
.chronicle .chap { margin-top: 10px; }
.chronicle .chap h4 { margin: 6px 0; color: #6b5a3a; font-size: 13px; }
.chronicle ol { padding-left: 20px; margin: 4px 0; }
.chronicle li { margin: 2px 0; line-height: 1.5; }
.chronicle .重3 { color: #b8860b; font-weight: 600; }
.chronicle .cls { color: #8a7a55; font-size: 11px; margin: 0 4px; }
.chronicle .year { color: #8a7a55; margin-right: 4px; font-variant-numeric: tabular-nums; }
.chronicle .tag { color: #b8860b; font-style: normal; font-size: 11px; }

.shop { padding-top: 6px; }
.shop-sec { margin: 10px 0 4px; }
.shop-sec-title { font-size: 12px; color: #8a7a55; font-weight: bold; margin: 4px 0; opacity: .8; }
.shop-cards { display: grid; grid-template-columns: 1fr; gap: 6px; }
.shop-card { border: 1px solid #c2a878; border-radius: 6px; padding: 8px 10px; background: rgba(255,255,255,.4); }
.shop-card.off { opacity: .55; background: rgba(0,0,0,.03); }
.shop-card .shop-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shop-card .chip { font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor; }
.shop-card .花名 { font-size: 14px; color: #3a2e1a; }
.shop-card .tier-tag { font-size: 11px; color: #8a7a55; font-style: normal; padding: 0 4px; }
.shop-card .owned { font-size: 11px; color: #6b5a35; font-style: normal; margin-left: auto; background: rgba(201,150,43,.12); padding: 1px 6px; border-radius: 3px; }
.shop-card .shop-sub { font-size: 11px; color: #6b5a35; margin: 4px 0 6px; }
.shop-card button { width: 100%; padding: 6px 10px; font-size: 13px; }

.bag.stash { margin: 6px 0 10px; border: 1px solid #c2a878; border-radius: 6px; padding: 0; background: rgba(255,255,255,.25); }
.bag.stash > summary { font-size: 12px; color: #5a4d33; padding: 6px 10px; cursor: pointer; list-style: none; }
.bag.stash > summary::-webkit-details-marker { display: none; }
.bag.stash > summary::before { content: '▸ '; color: #8a7a55; }
.bag.stash[open] > summary::before { content: '▾ '; }
.bag.stash[open] { padding: 0 10px 8px; }
.bag.stash .hint { display: inline; font-style: normal; opacity: .7; margin: 0 0 0 4px; }

.op-hook { font-size: 12px; color: #8a6a3f; font-style: italic; margin-bottom: 10px; padding: 6px 8px; background: rgba(184,134,11,.08); border-left: 2px solid #b8860b; }

.warn { font-size: 11px; color: #a83a2c; margin-left: 6px; }
.ok   { font-size: 11px; color: #2c7a3a; margin-left: 6px; }

.exp-chip { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 8px; margin-left: 2px; }
.exp-chip.safe   { color: #5a4d33; background: rgba(94,128,80,.15); }
.exp-chip.warn   { color: #8a6a3f; background: rgba(184,134,11,.18); }
.exp-chip.danger { color: #a83a2c; background: rgba(168,58,44,.18); }
.exp-chip.red    { color: #fff; background: #a83a2c; }