@font-face { font-family: "Ma Shan Zheng"; src: url("assets/ink-title.woff2") format("woff2"); font-display: swap; }
:root {
  --bg: #f3f3ee; --frame: #f3f3ee; --panel: #f3f3ee; --panel2: #e7e7df;
  --line: #31363145; --line-strong: #66725c; --text: #20291f;
  --muted: #4b5846; --faint: #58634f; --gold: #806335; --jade: #465a3d;
  --blue: #73858a; --red: #9e4436; --purple: #8f818c;
  --ink-font: "Ma Shan Zheng", "KaiTi", "STKaiti", "SimSun", serif;
}
body { background: #d2d5cf; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
button { border-radius: 3px; border-color: #839076; background: #fafbf5; }
button:hover { background: #353e3210; border-color: var(--line-strong); }
button:active:not(:disabled) { background: #353e321d; }
button:disabled { opacity: 1; color: #656d5d; background: #e1e4da; border-color: #a7afa0; border-style: dashed; }
button:focus-visible, textarea:focus-visible { outline-color: var(--red); }
svg.lucide { stroke-width: 1.8; }
.game-frame { background-color: var(--bg); background-image: var(--paper-grain); }
.game-header { gap: 10px; padding: calc(17px + env(safe-area-inset-top)) 24px 10px; background: transparent; }
.brand { gap: 3px; }
.brand strong { font-family: var(--ink-font); color: #222823; font-weight: 400; font-size: 34px; line-height: 1.2; }
.brand small { font-size: 12px; }
.hud { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 174px; }
.badge { border: 0; border-radius: 0; background: transparent; font-size: 12px; padding: 1px 0; min-height: 19px; color: #414e3a; }
#realmBadge { background: transparent; color: var(--red); justify-self: end; grid-column: 1 / -1; font-family: var(--ink-font); font-size: 17px; }
.purse-strip { gap: 16px; padding: 5px 24px 7px; font-size: 12px; min-height: 30px; border: 0; color: #414c39; }
.purse-strip svg { width: 13px; height: 13px; color: #8b826b; }
#cycleLabel { color: var(--muted); }
.panel-header { padding: 20px 24px 14px; }
.panel-title { font-family: var(--ink-font); font-size: 28px; font-weight: 400; }
.panel-body, .ledger-body { padding: 0 24px 24px; }
.canvas-scene { height: 210px; background: transparent; }
.scene-caption { left: 27px; top: 20px; display: flex; align-items: flex-start; gap: 10px; }
.scene-caption span { writing-mode: vertical-rl; font-family: var(--ink-font); font-size: 30px; line-height: 1.2; color: #282e28; }
.scene-caption small { writing-mode: vertical-rl; font-size: 11px; line-height: 1.45; color: #505a45; padding-top: 3px; }
.scene-caption::after { content: "问道"; position: absolute; left: 46px; top: 90px; width: 22px; height: 40px; writing-mode: vertical-rl; text-align: center; font-family: var(--ink-font); font-size: 13px; line-height: 1.1; color: #a14b3f; border: 1px solid #a14b3f; padding: 4px 2px; transform: rotate(-5deg); }
.scene-travel { top: 10px; right: 15px; border: 1px solid #79846c; color: #374b2e; background: #f5f6efed; }
.sound-toggle { position: absolute; top: 62px; right: 15px; border: 1px solid #79846c; color: #374b2e; background: #f5f6efed; }
.sound-toggle[aria-pressed="false"], #profileSoundBtn[aria-pressed="false"] { color: #8a4938; border-color: #9f7462; }
.audio-settings { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px 12px; align-items: center; padding: 18px 0 12px; border-bottom: 1px solid var(--line); color: #34442a; font-size: 14px; }
.audio-settings output { font-size: 13px; min-width: 40px; text-align: right; }
.audio-settings input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: #526846; touch-action: pan-y; }
.audio-settings input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.bars { padding: 2px 24px 10px; gap: 18px; }
.bar-label { font-size: 11px; color: #414e3a; }
.bar { height: 4px; border-radius: 0; background: #3c423225; }
.bar span { border-radius: 0; }
.hp span { background: #965343; }
.stamina span { background: #526846; }
.karma span { background: #796786; }
.scene-card { padding: 8px 24px 10px; }
.story-title { color: #30362c; font-family: var(--ink-font); font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0 0 8px; }
.story-text { color: #323e2b; font-size: 14px; line-height: 1.85; }
.result-box { border-left: 3px solid var(--red); background: #ede5d8; color: #473e2c; font-size: 14px; padding: 10px 12px; margin: 0 24px 12px; line-height: 1.8; }
.scene-body > div:last-child { padding: 0 24px; }
.section-label { color: #4a573f; font-size: 12px; font-weight: 600; margin: 10px 0; }
.scene-body > div:last-child .section-label { display: flex; align-items: center; gap: 10px; margin: 6px 0 3px; }
.scene-body > div:last-child .section-label::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.action-list { gap: 10px; margin-top: 10px; }
.action { position: relative; min-height: 164px; padding: 12px; background: #fafbf5; border: 1px solid #7e8c72; border-left: 3px solid #62744f; border-radius: 3px; gap: 8px; box-shadow: 0 2px 0 #414c3020; }
.action strong { width: 100%; padding-right: 16px; color: #25341d; font-family: var(--ink-font); font-size: 21px; font-weight: 400; line-height: 1.35; }
.action > svg { position: absolute; width: 16px; height: 16px; top: 18px; right: 8px; color: #495e39; }
.action span { color: #46553c; font-size: 13px; line-height: 1.65; }
.action small { color: #515f42; font-size: 12px; font-weight: 500; }
.action:hover:not(:disabled) { border-color: #4e633c; background: #f0f4e8; }
.action:active:not(:disabled) { background: #e8ddce; border-color: #8e4434; box-shadow: inset 0 0 0 1px #8e4434; }
.action:disabled { background: #e1e4da; border-color: #a1aa97; border-style: dashed; box-shadow: none; }
.action:disabled strong, .action:disabled span, .action:disabled small, .action:disabled > svg { color: #636d58; }
.breakthrough { margin: 18px 24px 0; border: 0; padding: 0; }
.breakthrough strong { font-family: var(--ink-font); font-size: 20px; font-weight: 400; }
.primary { color: #f5f3e9; background: #343c32; border: 0; font-family: var(--ink-font); font-size: 21px; clip-path: polygon(1% 10%,8% 4%,22% 7%,47% 3%,67% 6%,88% 2%,99% 8%,98% 38%,100% 69%,97% 92%,72% 97%,44% 94%,23% 98%,2% 92%,0 63%); }
.primary:hover { background: #242c22; }
.primary:active:not(:disabled) { background: #172413; color: #fffaf0; }
.primary:disabled { background: #cdd3c3; color: #525e45; }
.command-bar { gap: 16px; padding: 8px 24px; border: 0; background-color: var(--bg); background-image: var(--paper-grain); }
.command-bar button { font-size: 22px; }
.day-hint { gap: 4px; color: #515e44; font-size: 12px; }
.day-hint strong { color: #344428; font-size: 13px; font-weight: 600; }
.bottom-nav { position: relative; padding: 5px 12px calc(5px + env(safe-area-inset-bottom)); background: transparent; border: 0; }
.bottom-nav::before { content: ""; position: absolute; height: 1px; background: #3d44382c; left: 24px; right: 24px; top: 0; }
.bottom-nav { gap: 6px; }
.bottom-nav button { min-height: 55px; gap: 3px; color: #4c5b42; }
.bottom-nav button span { font-family: var(--ink-font); font-size: 19px; line-height: 1.2; }
.bottom-nav button[aria-current="page"] { color: #fffaf0; background: #873e2f; border-radius: 3px; }
.bottom-nav button:active { background: #dfdfd0; color: #4e3226; }
.bottom-nav button[aria-current="page"]:active { background: #68291d; color: #fffaf0; }
.bottom-nav svg { width: 18px; height: 18px; }
.route-heading { padding: 20px 0 28px; }
.route-heading > span { font-family: var(--ink-font); font-size: 46px; color: #394431; }
.location { min-height: 84px; border-left: 3px solid transparent; }
.location::before { top: 27px; width: 6px; height: 6px; border-color: #87917e; }
.location.active { background: #e5eadb; border-left-color: #934936; }
.location.active::before { background: var(--red); border-color: var(--red); }
.location strong, .task strong, .item-name { color: #454e3b; font-family: var(--ink-font); font-size: 22px; font-weight: 400; }
.location span { font-size: 13px; color: #46563a; }
.tabs { padding: 0 24px 12px; gap: 7px; }
.tab { border: 1px solid #869578; font-family: var(--ink-font); font-size: 21px; background: #fafbf5; color: #37482a; }
.tab.active { color: #fffdf3; background: #3d4e30; border-color: #3d4e30; }
.tab.active:active { background: #26381e; color: #fffdf3; }
.task.complete { border-color: #969e87; }
.task .badge { color: #765131; }
.market-main strong { font-family: var(--ink-font); font-size: 23px; font-weight: 400; }
.market-actions button { font-family: var(--ink-font); font-size: 20px; }
.profile-heading { gap: 20px; padding: 18px 0 28px; }
.seal { height: 64px; background: transparent; border: 2px solid #9f5745; outline: 1px solid #9f5745; outline-offset: -5px; color: #9f5745; font-family: var(--ink-font); font-size: 38px; transform: rotate(-4deg); }
.profile-heading h2 { font-size: 26px; font-family: var(--ink-font); font-weight: 400; }
.profile-heading p { font-size: 13px; }
.chip b { color: #34442a; font-size: 14px; font-weight: 500; }
.chip span { font-size: 12px; }
.task span, .item-desc, .npc span, .archive span, .log, .empty { color: #49583e; font-size: 14px; line-height: 1.75; }
.breakthrough p { color: #49583e; font-size: 13px; }
.market-main { font-size: 14px; }
.task button, .market-actions button, .tool-row button, .cycle-tools button { font-size: 14px; background: #fafbf5; border: 1px solid #839076; }
.market-actions button { min-width: 54px; font-size: 22px; }
.market-actions button:disabled { background: #e1e4da; border-style: dashed; color: #656d5d; }
textarea { border-radius: 0; background: #fff3; }
.danger { color: #9c5746; border-color: #9c574659; background: transparent; }
@media (max-width: 360px) {
  .game-header { padding-inline: 18px; gap: 5px; }
  .brand strong { font-size: 29px; }
  .hud { max-width: 144px; gap: 2px; }
  .badge { font-size: 11px; }
  .purse-strip { padding-inline: 18px; gap: 9px; }
  .action-list { gap: 8px; }
  .action { padding: 10px 8px; }
  .action strong { font-size: 19px; }
  .action > svg { right: 5px; top: 15px; }
  .bars { gap: 9px; }
}
@media (max-height: 700px) {
  .canvas-scene { height: 158px; }
  .scene-caption { top: 7px; }
  .scene-caption span { font-size: 25px; }
  .scene-card { padding-top: 5px; padding-bottom: 7px; }
  .story-text { font-size: 14px; line-height: 1.75; }
  .bars { padding-bottom: 5px; }
}
@media (max-height: 650px) {
  .canvas-scene { height: 110px; }
  .scene-caption span { font-size: 20px; }
  .scene-caption::after { display: none; }
  .command-bar { padding-block: 6px; }
  .bottom-nav button { min-height: 50px; }
}