:root {
  color-scheme: dark;
  --ink: #171915;
  --ink-2: #20231d;
  --panel: #252820;
  --paper: #e8e2d2;
  --muted: #aaa998;
  --line: #494b3f;
  --jade: #69b39c;
  --cinnabar: #c65445;
  --gold: #c9a85d;
  --blue: #6f91ad;
  --purple: #a77fc1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Microsoft YaHei", "Noto Serif SC", serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { border-radius: 0; }

.topbar {
  min-height: 72px;
  padding: 0 max(22px, calc((100vw - 1380px) / 2));
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(23, 25, 21, 0.94);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
}
.studio-link { display: inline-flex; align-items: center; gap: 11px; }
.studio-link strong, .studio-link small { display: block; letter-spacing: 0; }
.studio-link strong { font-size: 14px; }
.studio-link small { color: var(--muted); font: 9px/1.2 Consolas, monospace; }
.seal { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--cinnabar); color: var(--cinnabar); font-weight: 800; }
.back-link { color: var(--muted); font-size: 13px; }
.back-link:hover, .back-link:focus-visible { color: var(--jade); outline: none; }
.back-short { display: none; }

.wuxia-shell { width: min(1380px, calc(100% - 44px)); margin: 0 auto; padding: 42px 0 70px; }
.game-titlebar { margin-bottom: 30px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.edition { margin: 0 0 8px; color: var(--jade); font: 700 11px/1.3 Consolas, monospace; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0; font-size: clamp(46px, 7vw, 84px); line-height: 0.95; letter-spacing: 0; }
.game-titlebar > p { max-width: 380px; margin-bottom: 3px; color: var(--muted); text-align: right; }

.character-strip {
  min-height: 84px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
  align-items: center;
  gap: 26px;
  background: var(--ink-2);
}
.identity { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-weight: 800; }
.identity strong, .identity span { display: block; }
.identity strong { font-size: 17px; }
.identity div span { color: var(--muted); font-size: 12px; }
.resource-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.resource-label strong { color: var(--paper); font-family: Consolas, monospace; }
.bar { height: 5px; margin-top: 7px; background: #11130f; overflow: hidden; }
.bar i { display: block; width: 0; height: 100%; background: var(--cinnabar); transition: width 180ms ease; }
.bar.qi i { background: var(--jade); }
.hero-numbers { display: flex; gap: 18px; color: var(--muted); font-size: 12px; }
.hero-numbers strong { color: var(--paper); font-family: Consolas, monospace; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.55fr); gap: 14px; align-items: start; }
.adventure-panel, .character-panel { border: 1px solid var(--line); background: var(--ink-2); }
.adventure-panel { min-height: 730px; padding: 24px; }
.chapter-head { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.chapter-head p { margin-bottom: 2px; color: var(--jade); font-size: 12px; }
.chapter-head h2 { margin-bottom: 0; font-size: 30px; letter-spacing: 0; }
.danger-label { padding: 6px 9px; border: 1px solid var(--line); color: var(--muted); font: 11px/1.3 Consolas, monospace; }

.stage-map { margin: 22px 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.stage-node { min-height: 48px; padding: 7px 6px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.stage-node span, .stage-node strong { display: block; }
.stage-node span { font: 10px/1.2 Consolas, monospace; }
.stage-node strong { margin-top: 3px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-node:hover:not(:disabled), .stage-node:focus-visible:not(:disabled) { border-color: var(--jade); color: var(--paper); outline: none; }
.stage-node.is-current { border-color: var(--jade); background: rgba(105, 179, 156, 0.1); color: var(--jade); }
.stage-node.is-cleared { color: var(--gold); }
.stage-node:disabled { opacity: 0.34; cursor: not-allowed; }

.scene { min-height: 178px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr); }
.scene-copy { padding: 26px 24px 24px 0; }
.scene-copy > p { min-height: 52px; color: var(--muted); }
.reward-line { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.reward-line span { color: var(--muted); }
.reward-line strong { color: var(--gold); }
.enemy-box { padding: 24px; border-left: 1px solid var(--line); background: #1c1f1a; }
.enemy-heading { display: flex; justify-content: space-between; gap: 18px; }
.enemy-heading span, .enemy-heading strong { display: block; }
.enemy-heading div span, #enemyLevel { color: var(--muted); font: 11px/1.3 Consolas, monospace; }
.enemy-heading strong { margin-top: 6px; font-size: 20px; }
.enemy-hp { height: 6px; margin-top: 24px; background: #11130f; }
.enemy-hp i { display: block; width: 0; height: 100%; background: var(--cinnabar); transition: width 160ms ease; }
#enemyHpText { margin: 8px 0 0; color: var(--muted); font: 11px/1.4 Consolas, monospace; }
.enemy-intent { margin-top: 14px; padding: 9px 10px; border-left: 2px solid var(--gold); display: flex; justify-content: space-between; gap: 16px; background: rgba(201, 168, 93, 0.07); font-size: 11px; }
.enemy-intent span { color: var(--muted); }
.enemy-intent strong { color: var(--gold); text-align: right; }
.enemy-intent.is-heavy { border-left-color: var(--cinnabar); background: rgba(198, 84, 69, 0.09); }
.enemy-intent.is-heavy strong { color: #d9867a; }
.enemy-intent.is-swift { border-left-color: var(--jade); background: rgba(105, 179, 156, 0.08); }
.enemy-intent.is-swift strong { color: var(--jade); }

.combat-log { height: 230px; padding: 18px 4px; overflow-y: auto; scrollbar-color: var(--line) transparent; }
.log-line { margin: 0; padding: 5px 8px; border-left: 1px solid transparent; color: var(--muted); font-size: 13px; }
.log-line:first-child { border-left-color: var(--jade); color: var(--paper); background: rgba(105, 179, 156, 0.06); }
.log-line em { color: var(--gold); font-style: normal; }
.log-line.hurt { color: #d9867a; }
.log-line.reward { color: var(--gold); }

.action-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.command { min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); background: transparent; color: var(--paper); cursor: pointer; font-weight: 700; }
.command small { display: block; color: var(--muted); font: 9px/1.2 Consolas, monospace; }
.command:hover:not(:disabled), .command:focus-visible:not(:disabled) { border-color: var(--jade); color: var(--jade); outline: none; }
.command.primary { border-color: var(--cinnabar); background: var(--cinnabar); color: #fff; }
.command.primary:hover:not(:disabled), .command.primary:focus-visible:not(:disabled) { background: transparent; color: #dc796a; }
.command.quiet { color: var(--muted); }
.command.is-recommended { border-color: var(--gold); color: var(--gold); background: rgba(201, 168, 93, 0.08); }
.command:disabled { opacity: 0.34; cursor: not-allowed; }

.character-panel { min-height: 730px; }
.panel-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.panel-tab { min-height: 48px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.panel-tab:last-child { border-right: 0; }
.panel-tab.is-active { color: var(--jade); background: rgba(105, 179, 156, 0.08); }
.panel-tab:hover, .panel-tab:focus-visible { color: var(--paper); outline: none; }
.side-panel { padding: 20px; }
.point-banner { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); }
.point-banner strong { color: var(--gold); font: 700 20px/1 Consolas, monospace; }
.stat-list > div { min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 32px 34px; align-items: center; gap: 8px; }
.stat-list span strong, .stat-list span small { display: block; }
.stat-list span strong { font-size: 15px; }
.stat-list span small { color: var(--muted); font-size: 11px; }
.stat-list b { font: 700 18px/1 Consolas, monospace; text-align: center; }
.stat-list button, .draft-stats button { width: 32px; height: 32px; border: 1px solid var(--line); background: transparent; color: var(--paper); cursor: pointer; }
.stat-list button:hover:not(:disabled), .stat-list button:focus-visible:not(:disabled), .draft-stats button:hover:not(:disabled), .draft-stats button:focus-visible:not(:disabled) { border-color: var(--jade); color: var(--jade); outline: none; }
.stat-list button:disabled, .draft-stats button:disabled { opacity: 0.25; cursor: not-allowed; }
.derived-stats { margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.derived-stats div { padding: 12px; display: flex; justify-content: space-between; background: var(--panel); }
.derived-stats dt { color: var(--muted); }
.derived-stats dd { margin: 0; font-family: Consolas, monospace; }
.xp-block { margin-top: 20px; }
.xp-block > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.xp-block strong { color: var(--paper); font-family: Consolas, monospace; }
.xp-bar { height: 5px; margin-top: 7px; background: #11130f; }
.xp-bar i { display: block; width: 0; height: 100%; background: var(--gold); }

.gear-slots { display: grid; gap: 8px; }
.gear-slot { min-height: 92px; padding: 13px; border: 1px solid var(--line); }
.gear-slot > span, .gear-slot strong, .gear-slot small { display: block; }
.gear-slot > span { color: var(--muted); font-size: 11px; }
.gear-slot strong { margin: 5px 0 2px; }
.gear-slot small { color: var(--muted); }
.total-bonus { margin-top: 14px; padding: 12px; color: var(--muted); font-size: 12px; background: #1a1c18; }
.inventory { display: grid; gap: 8px; }
.inventory-empty { padding: 42px 12px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.inventory-item { padding: 12px; border: 1px solid var(--line); }
.item-top { display: flex; justify-content: space-between; gap: 12px; }
.item-top strong { font-size: 14px; }
.quality-common { color: var(--paper); }
.quality-fine { color: var(--jade); }
.quality-rare { color: var(--blue); }
.quality-epic { color: var(--purple); }
.quality-legendary { color: var(--gold); }
.item-stats { margin: 6px 0 10px; color: var(--muted); font: 11px/1.5 Consolas, monospace; }
.item-compare { margin: -4px 0 10px; font-size: 11px; }
.compare-positive { color: var(--jade); }
.compare-negative { color: #d9867a; }
.compare-even { color: var(--muted); }
.item-actions { display: flex; gap: 6px; }
.item-actions button { min-height: 30px; padding: 4px 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.item-actions button:hover, .item-actions button:focus-visible { border-color: var(--jade); color: var(--paper); outline: none; }
.reset-button { width: calc(100% - 40px); min-height: 38px; margin: 12px 20px 20px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.reset-button:hover, .reset-button:focus-visible { border-color: var(--cinnabar); color: #d9867a; outline: none; }
.reset-button.is-armed { border-color: var(--cinnabar); background: rgba(198, 84, 69, 0.12); color: #d9867a; }

footer { width: min(1380px, calc(100% - 44px)); min-height: 90px; margin: 0 auto; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--muted); font-size: 12px; }
footer a:hover, footer a:focus-visible { color: var(--jade); outline: none; }

.modal { position: fixed; inset: 0; z-index: 50; padding: 20px; display: grid; place-items: center; background: rgba(8, 9, 7, 0.82); opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 160ms ease; }
.modal.is-visible { opacity: 1; visibility: visible; }
.modal-sheet { width: min(620px, 100%); max-height: calc(100vh - 40px); padding: 34px; border: 1px solid var(--line); background: var(--ink-2); overflow-y: auto; }
.modal-sheet h2 { margin-bottom: 24px; font-size: 30px; letter-spacing: 0; }
.name-field { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.name-field input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line); background: #151713; color: var(--paper); outline: none; }
.name-field input:focus { border-color: var(--jade); }
.draft-points { margin: 22px 0 8px; color: var(--muted); }
.draft-points strong { color: var(--gold); font-family: Consolas, monospace; }
.draft-stats { border-top: 1px solid var(--line); }
.draft-stats > div { min-height: 62px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 32px 36px 32px; align-items: center; gap: 8px; }
.draft-stats span strong, .draft-stats span small { display: block; }
.draft-stats span small { color: var(--muted); font-size: 11px; }
.draft-stats b { text-align: center; font-family: Consolas, monospace; }
.start-journey { width: 100%; min-height: 50px; margin-top: 24px; border: 1px solid var(--cinnabar); background: var(--cinnabar); color: white; font-weight: 800; cursor: pointer; }
.start-journey:hover:not(:disabled), .start-journey:focus-visible:not(:disabled) { background: transparent; color: #d9867a; outline: none; }
.start-journey:disabled { opacity: 0.38; cursor: not-allowed; }
.loot-sheet { width: min(500px, 100%); text-align: center; }
.loot-item { margin: 18px 0 24px; padding: 22px; border: 1px solid var(--line); background: #1a1c18; }
.loot-item strong, .loot-item span { display: block; }
.loot-item strong { margin-bottom: 7px; font-size: 22px; }
.loot-item span { color: var(--muted); font-size: 12px; }
.loot-item .item-compare { margin: 10px 0 0; }
.loot-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ending-sheet { width: min(560px, 100%); text-align: center; }
.ending-seal { width: 58px; height: 58px; margin: 0 auto 20px; border: 1px solid var(--cinnabar); display: grid; place-items: center; color: var(--cinnabar); font-size: 28px; font-weight: 800; }
.ending-sheet > p:not(.edition) { color: var(--muted); }
.ending-summary { margin: 24px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.ending-summary div { padding: 14px 8px; background: var(--panel); }
.ending-summary strong, .ending-summary span { display: block; }
.ending-summary strong { color: var(--gold); font: 700 22px/1.2 Consolas, monospace; }
.ending-summary span { margin-top: 4px; color: var(--muted); font-size: 11px; }

@media (max-width: 1040px) {
  .game-layout { grid-template-columns: 1fr; }
  .character-panel { min-height: auto; }
  .character-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .topbar { min-height: 64px; padding-inline: 14px; }
  .studio-link small { display: none; }
  .wuxia-shell, footer { width: min(100% - 24px, 1380px); }
  .wuxia-shell { padding: 30px 0 50px; }
  .game-titlebar { display: block; }
  .game-titlebar > p { margin: 14px 0 0; text-align: left; }
  h1 { font-size: 52px; }
  .character-strip { grid-template-columns: 1fr 1fr; gap: 14px; }
  .identity, .hero-numbers { grid-column: 1 / -1; }
  .hero-numbers { justify-content: space-between; }
  .adventure-panel { padding: 16px; }
  .stage-map { grid-template-columns: repeat(3, 1fr); }
  .scene { grid-template-columns: 1fr; }
  .scene-copy { padding: 20px 0; }
  .enemy-box { border-left: 0; border-top: 1px solid var(--line); }
  .combat-log { height: 210px; }
  .action-bar { grid-template-columns: repeat(2, 1fr); }
  .action-bar .primary { grid-column: 1 / -1; }
  .modal-sheet { padding: 24px 18px; }
  .loot-actions { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .back-long { display: none; }
  .back-short { display: inline; }
  .character-strip { grid-template-columns: 1fr; }
  .identity, .hero-numbers { grid-column: auto; }
  .stage-node strong { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar i, .enemy-hp i, .modal { transition: none; }
}