* { box-sizing: border-box; }
body { margin: 0; font-family: "Noto Serif CJK SC", "Songti SC", serif; background: #1d1a16; color: #e9dfc9; }
#hud { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: #2a251f; }
#dims { display: flex; gap: 18px; }
.dim { width: 120px; }
.dim .bar { height: 8px; background: #3d362d; border-radius: 4px; overflow: hidden; }
.dim .fill { height: 100%; background: #c9a86a; }
.dim .lbl { font-size: 14px; display: flex; justify-content: space-between; }
main { display: flex; gap: 12px; padding: 12px; }
#stage { position: relative; width: min(720px, 100%); aspect-ratio: 720 / 520; align-self: flex-start; }
#cv { background: #26211b; border-radius: 8px; touch-action: none; cursor: grab; width: 100%; height: 100%; display: block; }
#winter, #ended { position: absolute; inset: 0; background: #1f2630; border-radius: 8px; padding: 16px; overflow: auto; }
#ended { background: #261f1b; text-align: center; padding-top: 80px; }
#side { width: 300px; font-size: 14px; }
#side h3 { margin: 10px 0 6px; font-size: 15px; color: #c9a86a; }
.slot, .comp { display: inline-flex; flex-direction: column; align-items: center; width: 64px; padding: 4px; margin: 2px; border: 1px solid #5a4f40; border-radius: 6px; background: #2c271f; color: inherit; cursor: pointer; font: inherit; }
.slot img, .comp img, .zl img { width: 40px; height: 40px; background: #efe6d2; border-radius: 4px; }
.slot.ok { border-color: #e0b85a; box-shadow: 0 0 6px #e0b85a; }
.slot.used, .slot:disabled, .comp:disabled { opacity: .35; cursor: not-allowed; }
.comp.sel { border-color: #7fc4ff; box-shadow: 0 0 6px #7fc4ff; }
.zl { display: inline-flex; flex-direction: column; align-items: center; margin: 2px; font-size: 12px; }
.zl.new { color: #9fdc8f; }
.tally { border: 1px solid #5a4f40; border-radius: 6px; padding: 6px; margin: 4px 0; cursor: pointer; background: #2c271f; }
.tally.sel { border-color: #7fc4ff; }
#log { max-height: 160px; overflow: auto; font-size: 12px; padding-left: 20px; color: #b7ab93; }
button.act { margin: 6px 6px 0 0; padding: 6px 14px; background: #4a3f2f; color: inherit; border: 1px solid #8a7652; border-radius: 6px; font: inherit; cursor: pointer; }
#xcv { background: #efe6d2; border-radius: 6px; display: block; margin: 8px 0; cursor: crosshair; touch-action: none; max-width: 100%; height: auto; }
#help { padding: 6px 16px; font-size: 13px; color: #9a8f79; }
#toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: #7a2f2f; color: #fff; padding: 8px 16px; border-radius: 6px; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.on { opacity: 1; }

/* 手机竖屏：画布按视口宽等比缩放，侧栏落到画布下面，冬夜/结局铺满整屏 */
@media (max-width: 760px) {
  main { flex-direction: column; gap: 8px; }
  #side { width: 100%; }
  #hud { flex-wrap: wrap; gap: 4px 14px; }
  .dim { width: 46%; }
  #winter, #ended { position: fixed; inset: 0; border-radius: 0; z-index: 30; }
  #help { font-size: 12px; line-height: 2; }
}

/* 存档码对话框（导出 / 导入） */
#savedlg { position: fixed; inset: 0; background: rgba(20,16,12,.82); z-index: 50; display: none; align-items: center; justify-content: center; padding: 12px; }
#savedlg.on { display: flex; }
#dlgbox { background: #2a251f; border: 1px solid #8a7652; border-radius: 8px; padding: 14px 16px; width: min(560px, 100%); max-height: 92vh; overflow: auto; }
#dlgbox h3 { margin: 0 0 8px; font-size: 16px; color: #c9a86a; }
#dlgmsg { margin: 0 0 8px; font-size: 13px; color: #b7ab93; }
#dlgtext { width: 100%; background: #1d1a16; color: #e9dfc9; border: 1px solid #5a4f40; border-radius: 6px; padding: 8px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
#dlgbtns { text-align: right; }

/* 字源与版权页（dist 里由构建生成） */
#credits { max-width: 960px; margin: 0 auto; padding: 12px 16px 40px; font-size: 14px; }
#credits h1 { font-size: 22px; color: #c9a86a; }
#credits h2 { font-size: 16px; color: #c9a86a; margin-top: 22px; }
#credits table { border-collapse: collapse; width: 100%; }
#credits th, #credits td { border: 1px solid #3d362d; padding: 4px 8px; text-align: left; vertical-align: top; font-size: 13px; }
#credits th { background: #2a251f; color: #c9a86a; }
#credits .url { word-break: break-all; color: #b7ab93; }
#credits .team { margin-top: 20px; color: #c9a86a; font-size: 15px; }
#help a { color: #c9a86a; margin-left: 6px; }