:root {
  --fg: #f1e9d8;
  --muted: #a89f8c;
  --line: #4a4033;
  --bg: #1d1913;
  --panel: #2a241b;
  --accent: #ffe066;
  --warn: #f0b060;
  --bad: #ff7a6a;
  --sound: #9cc4ff;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--fg);
  background: var(--bg);
  color-scheme: dark;
}
body { margin: 0 auto; padding: 0 0.75rem 2rem; max-width: 46rem; background: var(--bg); }
header#top { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; overflow-wrap: anywhere; }
header#top > * { min-width: 0; }
h1 { font-size: 1.6rem; letter-spacing: 0.2em; }
h2 { font-size: 1.1rem; margin: 0.6rem 0 0.4rem; }
h3 { font-size: 1rem; margin: 0 0 0.25rem; }
.strong { font-weight: 600; }
.muted { color: var(--muted); }
.warning { color: var(--warn); border: 1px solid var(--warn); padding: 0.5rem; }
.notice { color: var(--bad); }
.hint { color: var(--warn); }
.dead { color: var(--bad); font-weight: 600; }
.controls { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0; }
.controls h2 { margin: 0 auto 0 0; min-width: 0; overflow-wrap: anywhere; }
ul, ol { padding-left: 1.2rem; }
li { margin: 0.2rem 0; overflow-wrap: anywhere; }
li button, li select { margin-left: 0.4rem; }
button, select, input { font: inherit; color: var(--fg); background: #3a3226; border: 1px solid #6a5c45; border-radius: 0.35rem; padding: 0.4rem 0.7rem; min-height: 2.5rem; }
button:hover:not(:disabled) { background: #4a4030; }
button:disabled, select:disabled, input:disabled { opacity: 0.45; }
button.primary { background: #6a4a1f; border-color: #c08a3a; font-weight: 600; }
input { min-width: 12rem; }
input::placeholder { color: var(--muted); }
form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
code { overflow-wrap: anywhere; background: #3a3226; padding: 0 0.2rem; }
dialog { max-width: 40rem; }
meter { width: 5rem; }

/* 场景：画布按格子数定宽高比，热点是叠在上面的透明按钮 */
#scene { position: relative; width: 100%; aspect-ratio: 11 / 9; border: 2px solid #5a4a33; border-radius: 0.4rem; overflow: hidden; background: #10100c; touch-action: manipulation; }
#scene-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#scene-hotspots { position: absolute; inset: 0; }
.hotspot { position: absolute; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0.3rem; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hotspot:hover:not(:disabled) { background: rgba(255, 224, 102, 0.12); }
.hotspot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hotspot:disabled { opacity: 1; cursor: default; }

#target { overflow-wrap: anywhere; background: var(--panel); border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.6rem 0.75rem; margin-top: 0.5rem; min-height: 4.5rem; }
#target-lines { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
#target-actions { margin-bottom: 0; }
.act-row { display: inline-flex; gap: 0.4rem; min-width: 0; max-width: 100%; }
.act-row select { min-width: 0; max-width: 100%; }
#elsewhere button { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

#bag-bar { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; overflow-x: auto; }
#bag { display: flex; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
#bag li { margin: 0; }
#bag li button { margin: 0; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; width: 3.4rem; padding: 0.25rem; font-size: 0.75rem; }
.slot.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.slot .icon { width: 2rem; height: 2rem; image-rendering: pixelated; }

#journal { max-height: 30vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.5rem 0.5rem 0.5rem 2rem; background: #15120d; font-size: 0.92rem; }
#journal .sound { color: var(--sound); }
#journal .tick { color: var(--muted); margin-right: 0.4rem; }
.long-toggle { margin-left: 0.4rem; font-size: 0.85em; min-height: 0; padding: 0.1rem 0.4rem; }
#say-form { margin-top: 0.5rem; }
#say-text { flex: 1; min-width: 8rem; }
.generic { border-top: 1px dashed var(--line); padding-top: 0.5rem; margin-top: 0.5rem; }