* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#04060f;
  font-family:"KaiTi","STKaiti","楷体","Microsoft YaHei",serif; }
#app { position:fixed; inset:0; display:block; cursor:crosshair; }

/* ---------- 暗角 ---------- */
#vignette { position:fixed; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(2,4,12,.55) 100%); }

/* ---------- 通用层 ---------- */
.layer { position:fixed; inset:0; z-index:10; display:flex; align-items:center;
  justify-content:center; }
.hidden { display:none !important; }

/* ---------- 加载页 ---------- */
#loading { background:radial-gradient(ellipse at 50% 42%, #101a36 0%, #060a18 68%, #03050d 100%); }
.ld-inner { text-align:center; }
.ld-ring { width:74px; height:74px; margin:0 auto 26px; border-radius:50%;
  border:2px solid rgba(216,184,106,.14); border-top-color:rgba(216,184,106,.85);
  animation:spin 1.1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.ld-text { color:#d8b86a; font-size:19px; letter-spacing:8px; text-shadow:0 0 18px rgba(216,184,106,.35); }

/* ---------- 开始页 ---------- */
#start { background:radial-gradient(ellipse at 50% 40%, rgba(12,20,44,.42) 0%, rgba(4,7,17,.78) 75%);
  backdrop-filter:blur(2px); }
.st-inner { text-align:center; padding:0 24px; animation:rise 1.2s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
.st-sub { color:#8fa3c7; font-size:15px; letter-spacing:9px; margin-bottom:18px; }
.st-title { color:#e9d5a3; font-size:76px; font-weight:400; letter-spacing:26px; margin-left:26px;
  text-shadow:0 0 34px rgba(233,213,163,.35), 0 0 90px rgba(216,184,106,.18); }
.st-line { width:340px; height:1px; margin:26px auto;
  background:linear-gradient(90deg, transparent, rgba(216,184,106,.75), transparent); }
.st-desc { color:#b7c3dc; font-size:17px; letter-spacing:5px; margin-bottom:34px; }
.st-quality { margin-bottom:30px; }
.q-label { color:#8fa3c7; font-size:14px; letter-spacing:4px; margin-right:14px; }
.q-btn { background:none; border:1px solid rgba(143,163,199,.4); color:#aeb9d2;
  font-family:inherit; font-size:14px; letter-spacing:3px; padding:6px 18px; margin:0 6px;
  cursor:pointer; border-radius:3px; transition:all .25s; }
.q-btn:hover { border-color:#d8b86a; color:#e9d5a3; }
.q-btn.active { border-color:#d8b86a; color:#e9d5a3; background:rgba(216,184,106,.1);
  box-shadow:0 0 14px rgba(216,184,106,.15); }
#enterBtn { background:linear-gradient(135deg, rgba(216,184,106,.16), rgba(216,184,106,.05));
  border:1px solid rgba(216,184,106,.65); color:#e9d5a3; font-family:inherit;
  font-size:21px; letter-spacing:14px; padding:14px 58px 14px 72px; cursor:pointer;
  border-radius:3px; transition:all .3s; text-shadow:0 0 12px rgba(233,213,163,.4); }
#enterBtn:hover { background:rgba(216,184,106,.22); box-shadow:0 0 34px rgba(216,184,106,.3);
  transform:translateY(-2px); }
.st-tip { margin-top:26px; color:#6b7a98; font-size:12.5px;
  font-family:"Microsoft YaHei",sans-serif; letter-spacing:1px; }

/* ---------- HUD ---------- */
#hudTitle { position:fixed; top:22px; left:28px; z-index:5; pointer-events:none;
  color:#e5d3a1; font-size:21px; letter-spacing:6px;
  text-shadow:0 0 16px rgba(216,184,106,.4); transition:opacity .8s; }
#hudTitle span { display:block; font-family:Georgia,serif; font-size:10px; letter-spacing:3px;
  color:#7787a5; margin-top:3px; }
#hint { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:5;
  pointer-events:none; color:#93a2c0; font-size:13px; letter-spacing:1px; white-space:nowrap;
  font-family:"Microsoft YaHei",sans-serif;
  background:rgba(8,12,26,.55); border:1px solid rgba(143,163,199,.18);
  padding:8px 22px; border-radius:20px; backdrop-filter:blur(6px);
  transition:opacity 1s; }
#hint b { color:#dcc687; font-weight:600; }
#crosshair { position:fixed; top:50%; left:50%; width:5px; height:5px; z-index:5;
  margin:-2.5px 0 0 -2.5px; border-radius:50%; pointer-events:none;
  background:rgba(233,213,163,.75); box-shadow:0 0 8px rgba(233,213,163,.6); }

/* ---------- 对话框 ---------- */
#dialogue { position:fixed; bottom:64px; left:50%; transform:translateX(-50%);
  z-index:15; width:min(720px, 88vw);
  background:linear-gradient(160deg, rgba(13,19,40,.94), rgba(8,11,24,.94));
  border:1px solid rgba(216,184,106,.5);
  box-shadow:0 0 0 1px rgba(216,184,106,.12), 0 8px 40px rgba(0,0,0,.55),
    inset 0 0 60px rgba(216,184,106,.05);
  border-radius:6px; padding:20px 26px 18px; backdrop-filter:blur(8px);
  animation:dlgIn .35s ease both; }
@keyframes dlgIn { from { opacity:0; transform:translateX(-50%) translateY(14px); }
  to { opacity:1; transform:translateX(-50%) translateY(0); } }
#dlgPlate { position:absolute; top:-16px; left:22px;
  background:linear-gradient(135deg, #6a1420, #46101a);
  border:1px solid rgba(216,184,106,.7); border-radius:4px;
  padding:4px 16px; box-shadow:0 2px 10px rgba(0,0,0,.5); }
#dlgName { color:#ecd9a8; font-size:17px; letter-spacing:4px;
  text-shadow:0 0 8px rgba(233,213,163,.35); }
#dlgText { color:#d9e0ee; font-size:17px; line-height:2; letter-spacing:1px;
  margin:8px 0 4px; min-height:68px; cursor:pointer;
  text-shadow:0 1px 4px rgba(0,0,0,.5); }
#dlgChoices { display:flex; gap:12px; justify-content:flex-end;
  margin-top:10px; padding-top:12px;
  border-top:1px solid rgba(216,184,106,.18); }
.dlg-choice { background:rgba(216,184,106,.08);
  border:1px solid rgba(216,184,106,.55); color:#e9d5a3;
  font-family:"KaiTi","STKaiti","楷体",serif; font-size:16px;
  letter-spacing:3px; padding:7px 22px; cursor:pointer; border-radius:4px;
  transition:all .22s; }
.dlg-choice:hover { background:rgba(216,184,106,.22);
  box-shadow:0 0 16px rgba(216,184,106,.25); transform:translateY(-1px); }

/* ---------- 移动端控制 ---------- */
.touch-only { display:none; }
body.touch .touch-only { display:flex; }
#touchControls { position:fixed; left:0; right:0; bottom:calc(74px + env(safe-area-inset-bottom, 0px));
  z-index:8; justify-content:space-between; padding:0 26px; pointer-events:none; }
#touchControls button { pointer-events:auto; width:76px; height:76px; border-radius:50%;
  background:rgba(8,12,26,.5); border:1px solid rgba(216,184,106,.55);
  color:#e9d5a3; font-family:"KaiTi","STKaiti","楷体",serif; font-size:19px;
  letter-spacing:2px; backdrop-filter:blur(6px); touch-action:none;
  transition:background .2s; -webkit-tap-highlight-color:transparent; }
#touchControls button:active { background:rgba(216,184,106,.3); }
#hint { max-width:92vw; white-space:normal; text-align:center; }
body.touch #hint b { white-space:nowrap; }