/* style.css */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:#04060b;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Helvetica Neue",Arial,sans-serif;
  color:#eaf1fb;user-select:none;-webkit-user-select:none;
  -webkit-font-smoothing:antialiased;touch-action:none;
}

#stage{position:fixed;inset:0;overflow:hidden;cursor:crosshair;}
canvas{position:absolute;inset:0;display:block;}
#scene{z-index:1;}
#fog{z-index:2;}
#fx{z-index:3;pointer-events:none;}

#cam{position:absolute;left:-10px;top:-10px;width:2px;height:2px;opacity:0;pointer-events:none;}

#vignette{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 38%,rgba(0,0,0,.58) 100%);
}

/* ---------------- HUD ---------------- */
#hud{position:absolute;inset:0;z-index:5;pointer-events:none;}

#lvInfo{position:absolute;left:28px;top:26px;display:flex;align-items:baseline;gap:12px;}
#lvNum{font-size:11px;letter-spacing:.3em;color:rgba(234,241,251,.42);font-weight:400;}
#lvName{font-size:14px;letter-spacing:.22em;font-weight:300;color:rgba(234,241,251,.92);
  text-shadow:0 1px 12px rgba(0,0,0,.6);}

#ringWrap{position:absolute;right:26px;bottom:26px;width:80px;height:80px;}
#ringWrap svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
.ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.5;}
.ring-fg{
  fill:none;stroke:#9ccfff;stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:276.46;stroke-dashoffset:276.46;
  transition:stroke-dashoffset .16s linear;
  filter:drop-shadow(0 0 8px rgba(156,207,255,.8));
}
#ringTxt{
  position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;
  padding-top:28px;font-weight:200;
}
#ringTxt b{font-size:18px;letter-spacing:.5px;}
#ringTxt i{font-style:normal;font-size:9px;opacity:.5;margin-left:1px;}

#hint{
  position:absolute;left:50%;bottom:13%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.26em;color:rgba(255,255,255,.5);
  font-weight:300;white-space:nowrap;opacity:0;
  transition:opacity .7s ease;text-align:center;line-height:2;
}
#hint.show{opacity:1;}

#toast{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.94);
  font-size:clamp(16px,3.4vw,24px);font-weight:200;
  letter-spacing:.36em;text-indent:.36em;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1);
  text-shadow:0 0 40px rgba(156,207,255,.7);
}
#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
#toast small{display:block;font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.5);
  margin-top:14px;text-indent:.3em;}

#camBadge{
  position:absolute;left:28px;bottom:26px;
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.2em;color:rgba(234,241,251,.4);
  opacity:0;transition:opacity .5s;
}
#camBadge.show{opacity:1;}
#camDot{width:6px;height:6px;border-radius:50%;background:#5cf0b0;
  box-shadow:0 0 10px #5cf0b0;animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}

/* ---------------- 开场 ---------------- */
#overlay{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;padding:24px;
  background:rgba(4,7,13,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:opacity .8s ease,visibility .8s;
}
#overlay.hide{opacity:0;visibility:hidden;}

#overlay h1{
  font-size:clamp(32px,8vw,58px);font-weight:200;
  letter-spacing:.44em;text-indent:.44em;
  background:linear-gradient(100deg,#cfe6ff,#9ccfff 40%,#e6d4ff 75%,#cfe6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(156,207,255,.35));
}
#overlay p{
  font-size:13px;letter-spacing:.14em;color:rgba(234,241,251,.55);
  font-weight:300;line-height:2.1;max-width:440px;
}
#overlay p b{color:#9ccfff;font-weight:400;}

#startBtn{
  margin-top:12px;padding:14px 50px;border-radius:100px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.05);
  color:#eaf1fb;font-size:13px;font-weight:300;
  letter-spacing:.34em;text-indent:.34em;
  cursor:pointer;font-family:inherit;
  transition:all .35s ease;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
#startBtn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);}
#startBtn:active{transform:scale(.97);}
#startBtn:disabled{opacity:.4;cursor:default;}

#stage.hide-cursor{cursor:none;}

@media (max-width:600px){
  #ringWrap{width:64px;height:64px;right:18px;bottom:18px;}
  #ringTxt{padding-top:22px;}
  #ringTxt b{font-size:15px;}
  #lvInfo{left:20px;top:20px;}
  #camBadge{left:20px;bottom:18px;}
}