:root{
  --ink:#050608;
  --ink2:#0a0c0e;
  --paper:#e9e5db;
  --fog:#9aa2a3;
  --dim:#6b7476;
  --line:rgba(233,229,219,.13);
  --blood:#a4382a;
  --sick:#8fa8a0;
  --serif:"Noto Serif SC","Songti SC","SimSun",serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,"Cascadia Mono",monospace;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none}
body{font-family:var(--sans);color:var(--paper)}

#stage{position:fixed;inset:0;background:#000}
#c{display:block;width:100%;height:100%}

/* 胶片颗粒 + 暗角，叠在 WebGL 之上做一层“脏” */
#grain{position:fixed;inset:0;pointer-events:none;opacity:.20;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.14) .6px,transparent .9px),
                  radial-gradient(rgba(0,0,0,.20) .7px,transparent 1px);
  background-size:2px 2px,3px 3px;background-position:0 0,1px 2px;
  animation:grainMove .9s steps(3) infinite}
@keyframes grainMove{
  0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-1px,1px,0)}66%{transform:translate3d(1px,-1px,0)}
}
#vignette{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(112% 86% at 50% 48%,transparent 34%,rgba(0,0,0,.42) 74%,rgba(0,0,0,.86) 100%)}

/* ================= 通用界面 ================= */
.screen{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,6vw,96px);
  background:
    radial-gradient(120% 90% at 12% 6%,rgba(30,42,44,.42) 0%,rgba(5,7,9,.94) 58%,#030405 100%),
    linear-gradient(180deg,#060809,#030405);
  transition:opacity .55s ease,visibility .55s}
.screen::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:radial-gradient(rgba(255,255,255,.05) .5px,transparent .7px);
  background-size:3px 3px;mix-blend-mode:overlay}
.screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.hidden{display:none!important}

.enter{appearance:none;border:1px solid rgba(233,229,219,.32);background:transparent;
  color:var(--paper);font:400 13px/1 var(--sans);letter-spacing:.22em;
  padding:15px 30px;cursor:pointer;transition:background .28s,border-color .28s,color .28s;
  margin-top:34px;min-width:196px}
.enter:hover:not(:disabled){background:rgba(233,229,219,.10);border-color:rgba(233,229,219,.7)}
.enter:disabled{opacity:.4;cursor:progress;letter-spacing:.16em}

/* ================= 开始页 ================= */
.intro-inner{position:relative;z-index:2;max-width:min(660px,90vw);margin:0 auto}
.intro-eyebrow{font:400 11px/1 var(--mono);letter-spacing:.24em;color:var(--sick);opacity:.86}
h1{margin-top:22px;font:400 clamp(52px,8.4vw,96px)/1.03 var(--serif);letter-spacing:.02em;color:var(--paper)}
h1 em{font-style:normal;color:var(--blood);opacity:.92}
.intro-sub{margin-top:20px;max-width:34em;font:300 14px/1.85 var(--serif);color:var(--fog);letter-spacing:.04em}

.intro-file{margin-top:42px;border-top:1px solid var(--line)}
.intro-file div{display:flex;gap:22px;align-items:baseline;padding:13px 2px;
  border-bottom:1px solid var(--line);font-size:12.5px}
.intro-file span{flex:0 0 62px;color:var(--dim);letter-spacing:.18em;font-family:var(--mono);font-size:10.5px}
.intro-file b{font-weight:400;color:rgba(233,229,219,.88);letter-spacing:.05em}

.intro-keys{margin-top:44px;display:flex;flex-wrap:wrap;gap:8px 20px;
  font:400 10.5px/1 var(--mono);letter-spacing:.12em;color:rgba(154,162,163,.62)}
.intro-keys span{border-left:1px solid rgba(233,229,219,.16);padding-left:9px}

/* 载入 */
.boot{position:absolute;left:clamp(22px,6vw,96px);bottom:clamp(22px,5vh,56px);z-index:3;
  display:flex;align-items:center;gap:14px;transition:opacity .4s}
.boot.gone{opacity:0;pointer-events:none}
.boot-bar{width:150px;height:1px;background:rgba(233,229,219,.16);position:relative;overflow:hidden}
.boot-bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--sick);transition:width .4s}
.boot span{font:400 10px/1 var(--mono);letter-spacing:.18em;color:var(--dim)}

/* ================= HUD ================= */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .7s ease .25s}
#hud.on{opacity:1}

.hud-task{position:absolute;left:clamp(16px,3.2vw,44px);top:clamp(16px,3vh,34px)}
.hud-eyebrow{font:400 9.5px/1 var(--mono);letter-spacing:.2em;color:rgba(143,168,160,.72)}
.hud-objective{margin-top:10px;font:400 13px/1.2 var(--serif);letter-spacing:.12em;color:rgba(233,229,219,.9)}
.hud-count{margin-top:9px;font-family:var(--mono);display:flex;align-items:baseline;gap:6px}
.hud-count b{font-size:20px;font-weight:500;color:var(--paper)}
.hud-count span{font-size:11px;color:var(--dim);letter-spacing:.1em}

.hud-clock{position:absolute;right:clamp(16px,3.2vw,44px);top:clamp(16px,3vh,34px);text-align:right}
#clock{display:block;font:400 17px/1 var(--mono);letter-spacing:.1em;color:rgba(233,229,219,.8)}
.hud-clock i{display:block;margin-top:7px;font:400 9px/1 var(--mono);font-style:normal;
  letter-spacing:.2em;color:rgba(154,162,163,.55)}

/* 准星 */
.reticle{position:absolute;left:50%;top:50%;width:0;height:0}
.reticle-dot{position:absolute;left:-1px;top:-1px;width:2px;height:2px;border-radius:50%;
  background:rgba(233,229,219,.7);box-shadow:0 0 4px #000}
.reticle-ring{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;
  opacity:0;transition:opacity .2s}
.ring-fill{width:100%;height:100%;border-radius:50%;
  background:conic-gradient(var(--sick) var(--p,0%),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);
  mask:radial-gradient(circle,transparent 58%,#000 60%)}

/* 提示与警报 */
.hint{position:absolute;left:50%;top:calc(50% + 64px);transform:translateX(-50%);
  font:400 11.5px/1 var(--sans);letter-spacing:.12em;color:rgba(233,229,219,.9);
  padding:8px 14px;background:rgba(4,6,8,.62);border:1px solid rgba(233,229,219,.14);
  white-space:nowrap;opacity:0;transition:opacity .2s}
.hint.on{opacity:1}
.hint b{color:var(--sick);font-weight:500}
.alert{position:absolute;left:50%;top:calc(50% - 96px);transform:translateX(-50%);
  font:400 12px/1 var(--mono);letter-spacing:.3em;color:#d98b7c;opacity:0;transition:opacity .3s}
.alert.on{opacity:.92;animation:pulse .9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* 底部计量 */
.hud-bottom{position:absolute;left:50%;bottom:clamp(16px,2.6vh,30px);transform:translateX(-50%);
  display:flex;gap:26px;align-items:flex-end;width:min(420px,72vw)}
.meter{flex:1}
.meter-label{font:400 9px/1 var(--mono);letter-spacing:.18em;color:rgba(154,162,163,.62);margin-bottom:7px;
  display:flex;justify-content:space-between}
.meter-bar{height:2px;background:rgba(233,229,219,.14);position:relative;overflow:hidden}
.meter-fill{height:100%;width:100%;background:rgba(233,229,219,.55);transition:width .12s linear}
.meter-fill.amber{background:#c9a269}

.hud-keys{position:absolute;left:50%;bottom:clamp(4px,1vh,10px);transform:translateX(-50%);
  display:flex;gap:14px;font:400 9px/1 var(--mono);letter-spacing:.08em;color:rgba(154,162,163,.34)}
.hud-keys b{color:rgba(233,229,219,.5);font-weight:400}

/* ================= 触屏 ================= */
#touch{position:fixed;inset:0;z-index:22;pointer-events:none}
.stick{position:absolute;left:22px;bottom:34px;width:118px;height:118px;border-radius:50%;
  border:1px solid rgba(233,229,219,.16);pointer-events:auto;
  background:radial-gradient(circle,rgba(233,229,219,.05),transparent 70%)}
.stick-knob{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;
  border-radius:50%;border:1px solid rgba(233,229,219,.3);background:rgba(233,229,219,.10)}
.touch-btns{position:absolute;right:18px;bottom:30px;display:grid;grid-template-columns:repeat(2,auto);
  gap:10px;pointer-events:auto}
.tbtn{appearance:none;width:66px;height:66px;border-radius:50%;border:1px solid rgba(233,229,219,.2);
  background:rgba(6,8,10,.5);color:rgba(233,229,219,.82);font:400 12px/1 var(--sans);
  letter-spacing:.14em}
.tbtn.accent{border-color:rgba(143,168,160,.5);color:#cfe0d8;grid-column:1 / span 2;width:100%;height:56px;
  border-radius:28px}

/* ================= 死亡 ================= */
.dead-inner,.win-inner{position:relative;z-index:2;max-width:min(560px,90vw);margin:0 auto}
.dead-eyebrow{font:400 10.5px/1 var(--mono);letter-spacing:.26em;color:var(--blood)}
h2{margin-top:20px;font:400 clamp(38px,6vw,64px)/1.06 var(--serif);letter-spacing:.02em}
h2 em{font-style:normal;color:var(--blood)}
#deadLine{margin-top:22px;max-width:30em;font:300 13.5px/1.9 var(--serif);color:var(--fog)}
.dead-tip{margin-top:26px;font:400 10.5px/1.6 var(--mono);letter-spacing:.1em;color:rgba(154,162,163,.5)}
#dead{background:radial-gradient(100% 80% at 50% 40%,rgba(38,12,10,.55) 0%,rgba(4,4,5,.96) 60%,#020203 100%)}

/* ================= 通关 ================= */
.win-eyebrow{font:400 10.5px/1 var(--mono);letter-spacing:.26em;color:var(--sick)}
.win-stats{margin-top:38px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.win-stats div{padding:17px 0 16px;border-right:1px solid var(--line)}
.win-stats div:last-child{border-right:0}
.win-stats span{display:block;font:400 9.5px/1 var(--mono);letter-spacing:.2em;color:rgba(154,162,163,.6)}
.win-stats b{display:block;margin-top:11px;font:500 22px/1 var(--mono);color:var(--paper)}
#winNote{margin-top:26px;max-width:32em;font:300 13.5px/1.9 var(--serif);color:var(--fog)}

/* 闪光层 */
#flash{position:fixed;inset:0;z-index:35;pointer-events:none;
  box-shadow:inset 0 0 0 rgba(163,56,42,0);transition:box-shadow .5s}

/* ================= 响应式 ================= */
@media (max-width:680px){
  .hud-keys{display:none}
  .hud-bottom{width:min(300px,62vw);gap:18px}
  .intro-file div{font-size:11.5px;gap:14px}
  .intro-file span{flex-basis:52px}
  .intro-keys{gap:7px 14px}
  .win-stats b{font-size:18px}
  h1{font-size:15vw}
}
@media (max-height:560px){
  .intro-file{margin-top:26px}
  .intro-keys{margin-top:24px}
  h1{margin-top:14px}
}