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

html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #f2efe9;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
/* 背景色放在 html（绘制顺序最底层），body 透明：
   摄像头视频以 z-index:-1 固定在画布之下，透明画布即可透出视频，
   而不会被 body 的深色背景盖住（负 z-index 定位元素在普通流块背景之前绘制）。 */
html { background: #0e0f13; }
body { background: transparent; }

canvas { display: block; }

.hidden { display: none !important; }

/* ---------- 开始页（党政纪检 · 红金）---------- */
#start-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 620px at 50% -10%, #7d1713 0%, #4a0c0a 55%, #2a0807 100%);
}
.panel {
  text-align: center; max-width: 540px; padding: 44px 36px;
  border: 1px solid rgba(232,201,138,0.35);
  border-radius: 18px; background: rgba(70,14,12,0.62);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 6px rgba(232,201,138,0.08), 0 24px 70px rgba(0,0,0,0.5);
}
#start-title { font-size: 40px; letter-spacing: 6px; font-weight: 700; color: #f3d9a0; text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.panel .sub { margin-top: 12px; color: #e9c79a; letter-spacing: 3px; }
#enter-btn {
  margin-top: 28px; padding: 14px 44px; font-size: 18px; letter-spacing: 3px;
  color: #4a0c0a; background: linear-gradient(180deg, #f3d9a0, #e8c98a); border: none; border-radius: 999px;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 8px 30px rgba(232,201,138,0.35);
}
#enter-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(232,201,138,0.5); }
.panel .hint { margin-top: 26px; font-size: 13px; line-height: 1.9; color: #e6c9a8; }
.panel .hint b { color: #f3d9a0; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#room-name {
  position: absolute; top: 22px; left: 0; right: 0; text-align: center;
  font-size: 20px; letter-spacing: 3px; color: #f2efe9;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
#controls-hint {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  font-size: 13px; color: #b9b2a6; text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
#reticle {
  position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%;
  background: rgba(255,255,255,0.85); box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
}
#exit-btn {
  position: absolute; top: 18px; right: 18px; pointer-events: auto;
  padding: 8px 16px; font-size: 13px; color: #f2efe9;
  background: rgba(20,22,28,0.6); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px; cursor: pointer;
}

/* ---------- 摇杆 ---------- */
#joystick {
  position: fixed; left: 28px; bottom: 36px; z-index: 30;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  touch-action: none;
}
#joystick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(232,201,138,0.85); box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

/* ---------- 灯箱 ---------- */
#lightbox {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8,9,12,0.92); padding: 24px;
}
#lb-stage { max-width: 90vw; max-height: 70vh; display: flex; align-items: center; justify-content: center; }
#lb-stage img, #lb-stage video { max-width: 90vw; max-height: 70vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
#lb-caption { margin-top: 16px; text-align: center; max-width: 80vw; }
#lb-caption h3 { font-size: 18px; font-weight: 600; letter-spacing: 1px; }
#lb-caption p { margin-top: 6px; font-size: 13px; color: #b9b2a6; }

/* 廉洁名句 / 故事 灯箱卡片（红金） */
.panel-lightbox {
  position: relative; max-width: 760px; max-height: 72vh; overflow: auto;
  background: #f7efe1; color: #2a2218; border-radius: 12px;
  border: 3px solid #b8923f; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  padding: 34px 40px;
}
.panel-lightbox::before {
  content: ""; position: absolute; inset: 9px; border: 1px solid #9e2b25;
  border-radius: 8px; pointer-events: none;
}
.pl-body {
  font-family: "KaiTi","STKaiti","SimSun","Microsoft YaHei",serif;
  font-size: 19px; line-height: 2; text-align: center; white-space: pre-wrap;
}
#lb-close {
  position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
  font-size: 28px; line-height: 1; color: #f2efe9; cursor: pointer;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
}
#lb-ar {
  margin-top: 18px; padding: 10px 26px; font-size: 14px; letter-spacing: 1px;
  color: #0e0f13; background: #e8c98a; border: none; border-radius: 999px; cursor: pointer;
}

/* ---------- AR 层 ---------- */
#ar-overlay { position: fixed; inset: 0; z-index: 60; background: #000; }
#ar-canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
#ar-overlay #ar-status {
  position: fixed; top: 16px; left: 0; right: 0; text-align: center; z-index: 2;
  font-size: 14px; color: #fff; text-shadow: 0 2px 8px #000; padding: 0 16px;
}
#ar-overlay #ar-close {
  position: fixed; top: 16px; right: 16px; z-index: 3; padding: 8px 16px;
  font-size: 13px; color: #fff; background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; cursor: pointer;
}

/* ---------- 签字墙捕获层 ---------- */
#sig-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: #111; overflow: hidden;
}
#sig-video {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; transform: scaleX(-1); /* 镜像，符合直觉 */
  opacity: 0.55; pointer-events: none;
}
#sig-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  background: rgba(255,255,255,0.04); touch-action: none; cursor: crosshair;
}
#sig-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 16px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
}
#sig-title { font-size: 15px; color: #fff; text-shadow: 0 2px 8px #000; }
#sig-status { font-size: 13px; color: #ffe2a8; text-shadow: 0 2px 6px #000; }
#sig-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
  padding: 14px 16px; background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent);
}
#sig-name {
  flex: 1 1 180px; max-width: 260px; padding: 10px 14px; font-size: 14px;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 999px;
  background: rgba(255,255,255,0.95); color: #222; outline: none;
}
.sig-btn {
  padding: 10px 18px; font-size: 14px; color: #222;
  background: #fff; border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.sig-btn.primary { background: #e8c98a; font-weight: 700; }
.sig-btn.active { background: #6c8cff; color: #fff; }
.sig-btn:active { transform: translateY(1px); }

/* ---------- 绘画空间 ---------- */
#paint-overlay { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
#paint-top {
  position: absolute; top: 0; left: 0; right: 0; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), transparent);
  pointer-events: none;
}
#paint-title { font-size: 15px; color: #fff; text-shadow: 0 2px 8px #000; }
#paint-status { font-size: 13px; color: #ffe2a8; text-shadow: 0 2px 6px #000; }
#paint-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
  padding: 12px 16px; background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  pointer-events: auto;
}
.p-item {
  display: flex; align-items: center; gap: 6px; color: #fff; font-size: 13px;
  background: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 999px;
}
.p-item input[type=color] { width: 28px; height: 28px; border: none; background: none; padding: 0; cursor: pointer; }
.p-item input[type=range] { width: 92px; }
.p-btn {
  padding: 8px 14px; font-size: 13px; color: #fff;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px; cursor: pointer;
}
.p-btn.active { background: #3a6ea5; border-color: #5b8fd0; }
.p-btn.primary { background: #e8c98a; color: #0e0f13; border: none; font-weight: 700; }
.p-btn:active { transform: translateY(1px); }
#paint-entry-btn {
  position: absolute; top: 18px; left: 18px; pointer-events: auto;
  padding: 8px 16px; font-size: 13px; color: #f2efe9;
  background: rgba(20,22,28,0.6); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px; cursor: pointer;
}
#sig-delete-btn {
  position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%);
  pointer-events: auto; z-index: 30;
  padding: 10px 22px; font-size: 14px; letter-spacing: 1px; color: #fff;
  background: rgba(160,32,28,0.92); border: 1px solid rgba(255,180,170,0.5);
  border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(120,20,16,0.45);
}
#sig-delete-btn:hover { background: rgba(190,40,34,0.96); }

/* 摄像头实时背景层：固定在画布之下（画布透明时透出） */
#paint-cam-video {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scaleX(-1);
  z-index: -1; pointer-events: none; display: none; background: #000;
}
#paint-cam-video.cam-on { display: block; }

/* 颜色样本 */
.p-palette { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  border: 2px solid rgba(255,255,255,0.45); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px #e8c98a; }