/* 机械宅邸 · 3D密室逃脱 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: #e8dcc0;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#app { position: fixed; inset: 0; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%;
  background: rgba(255,240,200,.85); box-shadow: 0 0 6px rgba(255,220,150,.8);
}
#prompt {
  position: absolute; left: 50%; top: 56%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 6px; font-size: 15px; letter-spacing: 1px;
  background: rgba(10,8,4,.72); border: 1px solid rgba(220,190,130,.5);
  text-shadow: 0 1px 2px #000; white-space: nowrap;
}
#topbar { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; pointer-events: auto; }
.hud-btn {
  padding: 8px 14px; font-size: 14px; color: #e8dcc0; cursor: pointer;
  background: rgba(20,16,10,.8); border: 1px solid rgba(220,190,130,.5); border-radius: 6px;
}
.hud-btn:active { background: rgba(60,48,28,.9); }
#invbar {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 8px; pointer-events: auto;
}
.inv-slot {
  width: 54px; height: 54px; border-radius: 8px; cursor: pointer;
  background: rgba(20,16,10,.82); border: 1px solid rgba(220,190,130,.45);
  display: flex; align-items: center; justify-content: center;
}
.inv-slot svg { width: 38px; height: 38px; }
.inv-slot.sel { border-color: #ffd97a; box-shadow: 0 0 10px rgba(255,215,120,.7); }
#toast {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  max-width: 80%; padding: 10px 20px; border-radius: 8px; font-size: 15px; text-align: center;
  background: rgba(12,10,6,.85); border: 1px solid rgba(220,190,130,.55);
  text-shadow: 0 1px 2px #000; z-index: 40;
}

/* ---------- 触屏 ---------- */
#touch-ui { position: absolute; inset: 0; pointer-events: none; z-index: 15; }
#stick {
  position: absolute; width: 110px; height: 110px; border-radius: 50%;
  border: 2px solid rgba(230,200,140,.5); background: rgba(20,16,10,.35);
}
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px;
  margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(230,200,140,.55);
}
#btn-act {
  position: absolute; right: 26px; bottom: 90px; width: 84px; height: 84px;
  border-radius: 50%; font-size: 18px; color: #2a1f0e; pointer-events: auto;
  background: radial-gradient(circle at 35% 30%, #ffe9b0, #c9a254);
  border: 2px solid rgba(255,240,200,.8); box-shadow: 0 4px 14px rgba(0,0,0,.6);
}
#btn-act:active { transform: scale(.94); }

/* ---------- 覆盖层 / 面板 ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,3,2,.78); backdrop-filter: blur(3px);
}
.panel {
  width: min(92vw, 480px); padding: 30px 28px; text-align: center;
  background: linear-gradient(160deg, #241c10, #14100a);
  border: 1px solid rgba(220,190,130,.55); border-radius: 12px;
  box-shadow: 0 10px 50px rgba(0,0,0,.8), inset 0 0 40px rgba(120,90,40,.12);
}
.panel h1 { font-size: 40px; letter-spacing: 10px; color: #f0d9a0; text-shadow: 0 0 18px rgba(255,200,100,.35); }
.panel h2 { font-size: 26px; letter-spacing: 6px; color: #f0d9a0; margin-bottom: 18px; }
.subtitle { margin: 8px 0 14px; color: #b09a6d; letter-spacing: 4px; }
.story { margin: 12px 0 20px; font-size: 14px; line-height: 1.9; color: #cbb98f; }
.big-btn {
  display: block; width: 100%; margin: 10px 0; padding: 14px; font-size: 18px;
  letter-spacing: 3px; color: #2a1f0e; cursor: pointer; border: none; border-radius: 8px;
  background: linear-gradient(180deg, #f0d9a0, #c9a254);
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.big-btn.small { font-size: 15px; padding: 10px; background: linear-gradient(180deg, #8a7650, #5c4d31); color: #f0e6cc; }
.big-btn:active { transform: translateY(1px); }
#help-text { margin-top: 14px; font-size: 13px; line-height: 1.8; text-align: left; color: #bfa982; }
#win-stats { margin: 6px 0 14px; font-size: 16px; color: #ffd97a; letter-spacing: 2px; }

/* ---------- 通用弹窗 ---------- */
#modal { z-index: 60; }
#modal-box {
  width: min(92vw, 440px); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(160deg, #261e11, #15110a);
  border: 1px solid rgba(220,190,130,.6); border-radius: 10px;
  box-shadow: 0 12px 60px rgba(0,0,0,.85);
}
#modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid rgba(220,190,130,.3);
  font-size: 17px; letter-spacing: 3px; color: #f0d9a0;
}
#modal-close { background: none; border: none; color: #c9b489; font-size: 20px; cursor: pointer; padding: 2px 8px; }
#modal-body { padding: 18px; font-size: 14px; line-height: 1.9; }

/* 笔记纸张 */
.note-paper {
  padding: 18px; background: linear-gradient(170deg, #e8dcb8, #d3c194);
  color: #3a2d17; border-radius: 4px; line-height: 2; font-size: 14px;
  box-shadow: inset 0 0 30px rgba(120,90,40,.3);
}
.note-paper b { color: #7a2e12; }

/* 物品检查 */
.inspect-box { text-align: center; }
.inspect-box svg { width: 90px; height: 90px; margin-bottom: 10px; }
.inspect-name { font-size: 17px; color: #ffd97a; letter-spacing: 2px; margin-bottom: 8px; }

/* 密码键盘 */
.keypad-display {
  font-size: 30px; letter-spacing: 14px; text-align: center; padding: 10px;
  background: #0a0f0a; color: #7dff9a; border-radius: 6px; margin-bottom: 14px;
  font-family: "Courier New", monospace; text-shadow: 0 0 8px rgba(120,255,150,.7);
  min-height: 52px;
}
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button {
  padding: 14px 0; font-size: 20px; cursor: pointer; border-radius: 6px;
  background: #2c2416; color: #f0d9a0; border: 1px solid rgba(220,190,130,.4);
}
.keypad button:active { background: #4d3f24; }

/* 彩色音律面板 */
.pad-row { display: flex; gap: 12px; justify-content: center; margin: 16px 0; }
.pad {
  width: 62px; height: 62px; border-radius: 50%; cursor: pointer;
  border: 3px solid rgba(255,255,255,.25); transition: transform .08s;
}
.pad:active { transform: scale(.92); }
.pad.lit { box-shadow: 0 0 24px 6px currentColor; transform: scale(1.08); }
.seq-status { text-align: center; color: #cbb98f; min-height: 24px; }
.modal-btn {
  display: inline-block; margin: 8px 4px 0; padding: 10px 22px; font-size: 15px;
  cursor: pointer; border-radius: 6px; border: 1px solid rgba(220,190,130,.5);
  background: #2c2416; color: #f0d9a0; letter-spacing: 2px;
}
.modal-btn:active { background: #4d3f24; }
.modal-btn:disabled { opacity: .4; cursor: default; }

/* 电路 */
.circuit-wrap { display: flex; flex-direction: column; align-items: center; }
.circuit-grid {
  display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px);
  gap: 4px; padding: 10px; background: #101a12; border-radius: 8px;
  border: 2px solid #3a5a40;
}
.cell {
  background: #1c2b1e; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #33503a;
}
.cell svg { width: 56px; height: 56px; transition: transform .15s; }
.circuit-label { color: #9fd8a8; font-size: 13px; margin-top: 10px; text-align: center; }

/* 书架 */
.shelf-row { display: flex; gap: 6px; justify-content: center; margin: 12px 0; align-items: flex-end; }
.book {
  width: 34px; border-radius: 3px 3px 0 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-lr; font-size: 12px; letter-spacing: 2px;
  color: rgba(255,245,220,.9); border: 1px solid rgba(0,0,0,.4);
  box-shadow: inset -3px 0 6px rgba(0,0,0,.35);
}
.book:active { transform: translateY(3px); }

/* 大门机关 */
.door-check { text-align: left; margin: 10px 0; }
.door-check li { list-style: none; margin: 10px 0; font-size: 15px; }
.center { text-align: center; }
.dim { color: #a08d64; font-size: 13px; }

@media (max-width: 600px) {
  .panel h1 { font-size: 30px; letter-spacing: 6px; }
  .inv-slot { width: 46px; height: 46px; }
  .circuit-grid { grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); }
}