* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d1117;
  font-family: "PingFang SC","Microsoft YaHei","Segoe UI",sans-serif; color: #e8e4d8; }

#webcam { position: fixed; width: 2px; height: 2px; opacity: 0.01; }
#game { position: fixed; top:0; left:0; width:100vw; height:100vh; }

.overlay { position: fixed; inset: 0; background: rgba(13,17,23,0.92);
  display:flex; align-items:center; justify-content:center; z-index:100; backdrop-filter: blur(8px); overflow:auto; }
.start-inner { text-align:center; padding: 40px 24px; max-width: 720px; }
.start-inner h1 { font-size: 56px; font-weight:900; letter-spacing:8px; margin-bottom:8px;
  font-family: "Noto Serif SC","Songti SC",serif; color:#f0d9a8; }
.en-title { font-size: 20px; letter-spacing: 6px; font-family: "Segoe UI","Georgia",serif;
  color: #b8a06a; display:block; margin-top:6px; font-weight:600; }
.subtitle { font-size:16px; color:#9a9a9a; letter-spacing:2px; margin-bottom:28px; }
#start-btn, #restart-btn { background:#d4a853; color:#0d1117; border:none; padding:14px 48px;
  font-size:16px; font-weight:600; border-radius:4px; cursor:pointer; letter-spacing:2px; transition: transform .2s; }
#start-btn:hover, #restart-btn:hover { transform: scale(1.05); }
.hint { margin-top:18px; font-size:12px; color:#6a6a6a; letter-spacing:1px; }
.en-hint { color:#5a5a5a; margin-top:4px; }

/* ---------- 玩法指引 ---------- */
.guide { margin: 8px auto 32px; }
.guide-title { font-size: 15px; letter-spacing:4px; color:#cbb27e; font-weight:600; margin-bottom:18px; }
.guide-grid { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.guide-card { flex:1; min-width:160px; max-width:220px; background:rgba(255,255,255,0.04);
  border:1px solid rgba(240,217,168,0.18); border-radius:10px; padding:18px 14px; transition: transform .2s, border-color .2s; }
.guide-card:hover { transform: translateY(-3px); border-color:rgba(240,217,168,0.5); }
.guide-icon { font-size:26px; color:#d4a853; margin-bottom:8px; }
.guide-name-cn { font-size:20px; font-weight:700; color:#f0d9a8; letter-spacing:3px; }
.guide-name-en { font-size:11px; letter-spacing:2px; color:#9a9a9a; margin:2px 0 8px; text-transform:uppercase; }
.guide-desc-cn { font-size:12px; color:#cfc7b4; line-height:1.5; margin-bottom:4px; }
.guide-desc-en { font-size:11px; color:#7a7a7a; line-height:1.5; }
.guide-goal-cn { margin-top:20px; font-size:14px; color:#d4c9a8; letter-spacing:2px; }
.guide-goal-en { margin-top:4px; font-size:12px; color:#8a8578; letter-spacing:1px; }

#hud { position: fixed; top:20px; left:20px; z-index:50; display:flex; align-items:center; gap:12px; }
#dots { display:flex; gap:6px; }
#dots .dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.2); transition:all .4s; }
#dots .dot.done { background:#d4a853; }
#counter { font-size:12px; color:#9a9a9a; background:rgba(255,255,255,0.1); padding:4px 12px; border-radius:10px; }

#tip { position: fixed; bottom:40px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,0.95); color:#222; padding:10px 24px; border-radius:20px; font-size:14px; z-index:50; }
.hidden { display:none !important; }
@media (max-width:600px) { .start-inner h1 { font-size:36px; letter-spacing:4px; }
  .en-title { font-size:15px; } .start-inner { padding:20px 12px; }
  .guide-card { min-width:130px; padding:14px 10px; } }