/* 首页与开局界面：日式像素模拟经营风（暖色、木纹边框窗口、厚实按钮按下下沉）。
   字体：本地打包的 Fusion Pixel 12px Proportional 简体中文子集（assets/fonts，SIL OFL 1.1，见 assets/fonts/README.md），
   只含游戏文案里出现的字（tools/subset_font.js 生成）；缺字时由系统字体逐字补上，加载失败也能正常运行。不依赖任何境外 CDN。 */
@font-face {
  font-family: "LX Fusion Pixel";
  src: url("../../assets/fonts/fusion-pixel-12px-proportional-sc.subset.woff2") format("woff2");
  font-display: swap;
}
:root {
  --px-wood: #8a5a33;
  --px-wood-dark: #5c3a1e;
  --px-wood-light: #c08a55;
  --px-cream: #fff6dc;
  --px-paper: #fffaf0;
  --px-sky: #8fd3f4;
  --px-grass: #7cbf5a;
  --px-red: #d9573b;
  --px-red-dark: #9b3420;
  --px-gold: #f2c14e;
  --px-font: "LX Fusion Pixel", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

.px-home { padding-top: 14px; }
.px-home, .px-home button, .px-home select, .px-home input { font-family: var(--px-font); }

/* 木纹边框窗口：外框深木色、内框浅木色、窗内奶油色 + 细格子 */
.px-window {
  position: relative;
  background:
    linear-gradient(rgba(138, 90, 51, .06) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(138, 90, 51, .06) 1px, transparent 1px) 0 0 / 8px 8px,
    var(--px-cream);
  border: 4px solid var(--px-wood-dark);
  box-shadow: inset 0 0 0 3px var(--px-wood-light), inset 0 0 0 5px var(--px-wood), 4px 4px 0 rgba(60, 35, 15, .35);
  border-radius: 2px;
  padding: 14px 16px;
  margin: 0 0 14px;
  image-rendering: pixelated;
}
.px-home .start-hero { padding: 12px 12px 10px; text-align: center; }
.px-scene { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; border: 3px solid var(--px-wood-dark); background: var(--px-sky); }
.px-title { font-family: var(--px-font); font-weight: 400; font-size: 36px; letter-spacing: 3px; margin: 12px 0 6px; color: var(--px-red-dark);
  text-shadow: 2px 2px 0 var(--px-gold), 4px 4px 0 rgba(60, 35, 15, .25); }
.px-home .subtitle { font-size: 14px; color: #6b5338; }

.px-label { font-size: 15px; color: var(--px-wood-dark); margin-bottom: 8px; }
.px-field { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); align-items: center; gap: 6px 10px; margin: 8px 0; }
.px-field > small { grid-column: 1 / -1; }
.px-pick { display: flex; align-items: stretch; gap: 4px; }
.px-pick select { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; background: var(--px-paper); border: 3px solid var(--px-wood); border-radius: 0;
  padding: 6px 8px; font-size: 15px; color: var(--ink); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .08); }
.px-arrow { width: 34px; border: 3px solid var(--px-wood-dark); background: var(--px-gold); color: var(--px-wood-dark); font-size: 12px; cursor: pointer;
  box-shadow: 0 3px 0 var(--px-wood-dark); border-radius: 0; padding: 0; }
.px-arrow:active { transform: translateY(3px); box-shadow: 0 0 0 var(--px-wood-dark); }
.px-more summary { cursor: pointer; color: var(--px-wood); margin-top: 6px; }

/* 厚实按钮：底部阴影，按下下沉 */
.btn.px-btn { border-radius: 0; border: 4px solid var(--px-red-dark); background: var(--px-red); color: #fff; font-size: 19px; letter-spacing: 2px;
  box-shadow: 0 6px 0 var(--px-red-dark), 0 8px 0 rgba(60, 35, 15, .25); transition: transform .05s, box-shadow .05s; }
.btn.px-btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--px-red-dark), 0 2px 0 rgba(60, 35, 15, .25); }
.start-secondary { display: flex; gap: 10px; margin: 6px 0 14px; }
.btn.px-btn-sub { flex: 1; font-size: 14px; letter-spacing: 1px; padding: 8px; background: var(--px-paper); color: var(--px-wood-dark); border-color: var(--px-wood);
  box-shadow: 0 4px 0 var(--px-wood), 0 6px 0 rgba(60, 35, 15, .2); }
.btn.px-btn-sub:active { transform: translateY(4px); box-shadow: none; }
.px-home .footnote { font-family: inherit; }

/* 出发卡与抉择卡也用同一套按钮手感 */
#screen-identity .row-actions .btn { border-radius: 0; border-width: 3px; box-shadow: 0 4px 0 rgba(60, 35, 15, .35); }
#screen-identity .row-actions .btn:active { transform: translateY(4px); box-shadow: none; }
#screen-identity .depart-card { border: 4px solid var(--px-wood-dark); box-shadow: inset 0 0 0 3px var(--px-wood-light), 4px 4px 0 rgba(60, 35, 15, .3); border-radius: 2px; }
#screen-identity .dc-title { font-family: var(--px-font); }