* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --amber: #e8d27a;
  --amber-dim: #b9a86a;
  --ink: #0b0b08;
  --neon: #c8ff64;
  --magenta: #ff5cc8;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #050504;
  font-family: "Courier New", ui-monospace, monospace;
  color: var(--amber);
  cursor: default;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 16px 22px;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(232,210,122,.5);
  letter-spacing: 1px;
  z-index: 10;
}
#hud-left, #hud-right { display: flex; gap: 22px; }
.stat { font-size: 20px; opacity: .92; }
.stat.small { font-size: 14px; opacity: .7; }
.stat span { color: #fff; }
#health span { color: var(--magenta); letter-spacing: 2px; }

/* ---------- 摄像头预览 ---------- */
#cam-box {
  position: fixed; right: 18px; bottom: 18px;
  width: 220px; height: 165px;
  border: 1px solid rgba(232,210,122,.35);
  border-radius: 6px; overflow: hidden;
  background: #000;
  box-shadow: 0 0 24px rgba(0,0,0,.6);
  z-index: 10;
}
#cam, #skeleton {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: scaleX(-1); /* 镜像，照镜子更直觉 */
}
#cam { object-fit: cover; opacity: .55; }
#cam-label {
  position: absolute; left: 6px; top: 4px;
  font-size: 11px; opacity: .6; letter-spacing: 1px;
}

/* ---------- 中央动作提示 ---------- */
#cue {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 64px; font-weight: bold;
  letter-spacing: 6px;
  opacity: 0; pointer-events: none;
  text-shadow: 0 0 20px var(--neon);
  transition: opacity .12s ease;
  z-index: 9;
}
#cue.show { opacity: .9; }

/* ---------- 遮罩 ---------- */
#overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(40,36,18,.85), rgba(5,5,4,.97));
  z-index: 20;
  transition: opacity .5s ease;
}
#overlay.hidden { opacity: 0; pointer-events: none; }
#overlay-card {
  text-align: center; max-width: 460px; padding: 30px 36px;
  border: 1px solid rgba(232,210,122,.25);
  background: rgba(12,11,7,.6);
  backdrop-filter: blur(2px);
}
#ov-title { font-size: 40px; letter-spacing: 10px; margin-bottom: 8px; text-shadow: 0 0 18px rgba(232,210,122,.6); }
#ov-sub { opacity: .65; margin-bottom: 22px; letter-spacing: 2px; }
#ov-howto { list-style: none; text-align: left; margin: 0 auto 26px; display: inline-block; }
#ov-howto li { margin: 9px 0; font-size: 15px; opacity: .9; }
#ov-howto b { color: #fff; }
#start-btn {
  font-family: inherit; font-size: 18px; letter-spacing: 2px;
  color: var(--ink); background: var(--amber);
  border: none; padding: 13px 28px; border-radius: 4px;
  cursor: pointer; transition: transform .1s, box-shadow .2s;
  box-shadow: 0 0 20px rgba(232,210,122,.4);
}
#start-btn:hover { transform: scale(1.04); box-shadow: 0 0 30px rgba(232,210,122,.7); }
#ov-note { margin-top: 16px; font-size: 12px; opacity: .5; }

#loading {
  position: fixed; inset: 0; z-index: 21;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(40,36,18,.82), rgba(5,5,4,.96));
}
#loading-card {
  width: 360px; text-align: center; padding: 34px 38px;
  border: 1px solid rgba(232,210,122,.28);
  background: rgba(12,11,7,.72);
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0,0,0,.5);
}
#load-text { font-size: 19px; letter-spacing: 2px; opacity: .95; margin-bottom: 18px; min-height: 24px; }
#load-pct { font-size: 13px; opacity: .7; margin-top: 9px; letter-spacing: 1px; }
#load-hint { font-size: 12px; opacity: .45; margin-top: 8px; letter-spacing: 1px; }
#progress {
  width: 100%; height: 12px; border-radius: 7px; overflow: hidden;
  background: rgba(232,210,122,.1);
  border: 1px solid rgba(232,210,122,.3);
}
#progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber));
  box-shadow: 0 0 14px rgba(232,210,122,.7);
  border-radius: 7px; transition: width .12s linear;
}
/* 不确定进度：流动条 */
#progress-bar.indet {
  width: 38% !important; transition: none;
  animation: indet 1.1s infinite ease-in-out;
}
@keyframes indet {
  0%   { margin-left: -40%; }
  100% { margin-left: 102%; }
}
.hidden { display: none !important; }

/* 调试面板 */
#debug {
  position: fixed; left: 14px; bottom: 14px;
  font-size: 12px; line-height: 1.5;
  color: #9cff9c; background: rgba(0,0,0,.72);
  border: 1px solid rgba(150,255,150,.3);
  padding: 10px 14px; border-radius: 5px;
  white-space: pre; z-index: 30;
  pointer-events: none; min-width: 240px;
  text-shadow: 0 0 6px rgba(120,255,120,.4);
}
#debug .warn { color: #ff8855; }

/* 受伤红闪 */
#scene.hurt { animation: hurt .35s; }
@keyframes hurt {
  0% { filter: none; }
  30% { filter: saturate(2) hue-rotate(-25deg) brightness(1.3); }
  100% { filter: none; }
}