:root{
  --bg:#0a0c0b;
  --panel:#10140f;
  --panel2:#161b14;
  --line:#2a3326;
  --green:#7CFC8A;
  --green-dim:#3a6b42;
  --amber:#e8b14a;
  --red:#c0392b;
  --txt:#cfe8d0;
  --dim:#6f8a72;
  --font:"Cascadia Code","Consolas","SF Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--txt);font-family:var(--font);
  font-size:14px;line-height:1.7;overflow:hidden;
  text-shadow:0 0 2px rgba(124,252,138,.15);
}
.dim{color:var(--dim)}
a{color:var(--green)}

/* CRT 扫描线 + 暗角 */
#scanline{position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.25) 3px);
  mix-blend-mode:multiply;animation:flick 6s infinite}
@keyframes flick{0%,100%{opacity:.55}50%{opacity:.4}}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:9997;
  box-shadow:inset 0 0 220px 40px rgba(0,0,0,.85)}

#app{display:flex;flex-direction:column;height:100vh}
#topbar{display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel);z-index:10}
.brand{letter-spacing:1px;color:var(--green)}
.status span{margin-left:14px;padding:2px 10px;border:1px solid var(--line);border-radius:4px;font-size:12px}
#week-ind{color:var(--amber)}
#progress{color:var(--green)}

#layout{flex:1;display:flex;overflow:hidden}
#sidebar{width:170px;min-width:170px;border-right:1px solid var(--line);
  background:var(--panel);padding:10px 6px;overflow-y:auto}
.navbtn{display:block;width:100%;text-align:left;background:transparent;color:var(--txt);
  border:none;border-left:2px solid transparent;padding:9px 12px;cursor:pointer;
  font-family:var(--font);font-size:13px;transition:.15s}
.navbtn:hover{background:var(--panel2);border-left-color:var(--green-dim)}
.navbtn.active{background:var(--panel2);border-left-color:var(--green);color:var(--green)}
.navbtn.locked{color:var(--dim);cursor:not-allowed;opacity:.5}

#content{flex:1;overflow-y:auto;padding:22px 26px;max-width:880px}

/* 页面通用 */
.page-title{color:var(--green);border-bottom:1px dashed var(--line);
  padding-bottom:8px;margin-bottom:16px;letter-spacing:1px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:14px 16px;margin:12px 0}
.card h3{color:var(--amber);font-size:14px;margin-bottom:6px}
.hot{cursor:pointer;border-bottom:1px dotted var(--green-dim)}
.hot:hover{color:var(--green);background:rgba(124,252,138,.06)}
.hidden-clue{color:var(--green);font-size:12px;margin-top:4px}
.note{font-size:12px;color:var(--dim);font-style:italic}

/* 搜索 */
.searchbar{display:flex;gap:8px;margin-bottom:14px}
.searchbar input{flex:1;background:#0c0f0b;border:1px solid var(--line);color:var(--txt);
  padding:9px 12px;font-family:var(--font);border-radius:4px}
.btn{background:var(--green-dim);color:#06120a;border:1px solid var(--green);
  padding:8px 16px;border-radius:4px;cursor:pointer;font-family:var(--font);font-weight:bold;
  transition:transform .12s}
.btn:hover{transform:scale(1.04)}
.btn:active{transform:scale(.95)}
.btn.ghost{background:transparent;color:var(--green);border:1px solid var(--green-dim)}
.btn.danger{border-color:var(--red);color:var(--red);background:transparent}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* 收音机 */
#radio{position:fixed;right:18px;bottom:18px;width:300px;z-index:50;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 0 30px rgba(0,0,0,.6);user-select:none}
.radio-head{background:var(--panel2);padding:8px 12px;cursor:move;color:var(--amber);
  border-radius:8px 8px 0 0;font-size:13px;display:flex;justify-content:space-between}
#radio-power{color:var(--red)}
.radio-body{padding:12px}
.radio-screen{background:#05070a;border:1px solid var(--line);border-radius:4px;
  padding:10px;min-height:54px;font-size:13px;color:var(--green);margin-bottom:10px;
  box-shadow:inset 0 0 20px rgba(124,252,138,.08)}
.radio-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.radio-row label{width:34px;color:var(--dim);font-size:12px}
.radio-row input{flex:1;background:#0c0f0b;border:1px solid var(--line);color:var(--txt);
  padding:7px 9px;font-family:var(--font);border-radius:4px}
.radio-btns{display:flex;gap:8px;margin-bottom:8px}
.radio-btns .btn,.radio-btns .ghost{flex:1;padding:7px}
.radio-log{max-height:120px;overflow-y:auto;font-size:11px;color:var(--dim);
  border-top:1px solid var(--line);padding-top:6px}
.radio-log div{margin:3px 0}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* 弹窗 */
#modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9000;
  display:none;align-items:center;justify-content:center}
#modal-mask.show{display:flex}
#modal{background:var(--panel);border:1px solid var(--green-dim);border-radius:8px;
  padding:22px;max-width:420px;width:90%;box-shadow:0 0 40px rgba(124,252,138,.12)}
#modal h3{color:var(--amber);margin-bottom:12px}
#modal input{width:100%;background:#0c0f0b;border:1px solid var(--line);color:var(--txt);
  padding:10px;font-family:var(--font);border-radius:4px;margin:8px 0;letter-spacing:2px}
#modal .row{display:flex;gap:10px;margin-top:12px}

/* 碎片拼图 */
.pieces{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.piece{background:#0c0f0b;border:1px dashed var(--line);padding:18px;text-align:center;
  cursor:pointer;border-radius:6px;font-family:var(--font);color:var(--green-dim);transition:.15s}
.piece:hover{border-color:var(--green);color:var(--green)}
.piece.done{border-style:solid;border-color:var(--green);color:var(--green)}
.piece.wrong{border-color:var(--red);color:var(--red)}

/* 突脸 */
#scare{position:fixed;inset:0;z-index:9999;display:none;align-items:center;
  justify-content:center;background:#000;animation:flash .25s steps(2) 12}
#scare.show{display:flex}
#scare.show.burned{animation:flashburn .22s steps(2) 16}
@keyframes flash{0%{background:#1a0000}50%{background:#000}100%{background:#240404}}
@keyframes flashburn{0%{background:#2a0a00}50%{background:#000}100%{background:#3a1100}}
.scare-img{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.scare-img.burned{display:none}
.scare-img img{max-width:min(86vw,560px);max-height:min(78vh,560px);object-fit:contain;
  filter:blur(.4px) contrast(1.15)}
.scare-img.burned img{animation:burnpulse .9s ease-in-out infinite}
@keyframes burnpulse{0%,100%{filter:blur(.4px) contrast(1.15) brightness(1)}
  50%{filter:blur(.4px) contrast(1.4) brightness(1.22) drop-shadow(0 0 16px rgba(255,106,0,.55))}}
.scare-text{margin-top:16px;font-family:monospace;font-size:15px;letter-spacing:3px;
  color:var(--red);text-shadow:0 0 12px rgba(192,57,43,.9);animation:textJitter .18s steps(2) infinite}
@keyframes textJitter{0%{transform:translateX(0)}50%{transform:translateX(1px)}100%{transform:translateX(-1px)}}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9500;
  background:var(--panel2);border:1px solid var(--green-dim);color:var(--green);
  padding:10px 18px;border-radius:6px;opacity:0;transition:.3s;pointer-events:none;font-size:13px}
#toast.show{opacity:1}

/* 结局 */
.ending{text-align:center;padding:40px 10px}
.ending h1{font-size:26px;letter-spacing:3px;margin-bottom:18px}
.ending.normal h1{color:var(--dim)}
.ending.bad h1{color:var(--red)}
.ending.true h1{color:var(--green)}
.ending p{max-width:560px;margin:10px auto;color:var(--txt)}
.ending-thanks{margin:26px auto 0;max-width:560px;padding:14px 18px;
  border:1px dashed var(--green-dim);border-radius:6px;background:rgba(124,252,138,.04)}
.ending-thanks p{margin:6px 0;letter-spacing:1px}
.ending-thanks a{color:var(--green);text-decoration:none;border-bottom:1px dotted var(--green-dim)}
.ending-thanks a:hover{color:var(--amber)}

/* 响应式：移动优先 */
@media (max-width:760px){
  #sidebar{width:120px;min-width:120px;font-size:12px}
  .navbtn{padding:8px 8px}
  #content{padding:16px}
  #radio{width:calc(100% - 24px);right:12px;left:12px;bottom:12px}
  #radio.collapsed .radio-body{display:none}
  .brand span{display:none}
}

/* 开场画面 */
#intro{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#0b0e0c 0%,#020403 70%,#000 100%);
  transition:opacity .8s ease;text-align:center;padding:24px}
#intro.hide{opacity:0;pointer-events:none}
.intro-noise{position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:repeating-radial-gradient(circle at 50% 50%,#fff 0,#fff 1px,transparent 1px,transparent 3px);
  animation:noiseshift .45s steps(3) infinite}
@keyframes noiseshift{0%{transform:translate(0,0)}33%{transform:translate(-2px,1px)}
  66%{transform:translate(1px,-2px)}100%{transform:translate(0,0)}}
.intro-inner{position:relative;max-width:560px;animation:fadein 1.6s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.intro-tag{color:var(--dim);letter-spacing:4px;font-size:12px;margin-bottom:18px}
.intro-title{font-size:56px;letter-spacing:8px;color:#e9eef0;margin:0 0 14px;
  text-shadow:0 0 14px rgba(192,57,43,.7),3px 0 0 rgba(192,57,43,.55),-3px 0 0 rgba(124,252,138,.35);
  animation:flicker 4.5s infinite}
@keyframes flicker{0%,19%,21%,55%,57%,100%{opacity:1}
  20%{opacity:.4}56%{opacity:.6}80%{opacity:1}82%{opacity:.5}83%{opacity:1}}
.intro-sub{color:var(--amber);font-size:16px;line-height:1.8;margin-bottom:22px}
.intro-set{color:var(--txt);font-size:14px;line-height:1.9;margin-bottom:20px}
.intro-tips{list-style:none;text-align:left;display:inline-block;color:var(--dim);
  font-size:13px;line-height:2;margin-bottom:18px}
.intro-tips li{margin:2px 0}
.intro-ear{color:var(--green-dim);font-size:12px;margin-bottom:22px}
.intro-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.intro-foot{color:var(--dim);font-size:11px;margin-top:26px;opacity:.7}
@media (max-width:760px){ .intro-title{font-size:40px;letter-spacing:4px} .intro-inner{max-width:92vw} }

/* 线索档案 */
.clue-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.clue-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:#0c100e}
.clue-row.got{border-color:var(--green-dim);box-shadow:0 0 8px rgba(124,252,138,.15) inset}
.clue-row.locked{opacity:.55;font-style:italic}
.clue-no{color:var(--dim);font-family:monospace;width:20px}
.clue-name{flex:1}
.clue-row.got .clue-name{color:var(--green)}
.clue-mark{color:var(--green-dim)}
.clue-row.locked .clue-mark{color:var(--dim)}

/* 音效开关 */
#sound-toggle{cursor:pointer;user-select:none;font-size:13px;padding:2px 7px;border:1px solid var(--line);border-radius:4px;color:var(--amber)}
#sound-toggle:hover{border-color:var(--amber)}

/* ===== 新增 UI 特效 ===== */

/* 屏幕闪光（绿=收集 / 红=突脸） */
#flash{position:fixed;inset:0;z-index:9996;pointer-events:none;opacity:0;transition:opacity .15s}
#flash.on{opacity:1}

/* 故障抖动（周目变异 / 13层 / 突脸） */
@keyframes glitch{0%{transform:translate(0,0)}20%{transform:translate(-4px,1px)}
  40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,2px)}100%{transform:translate(0,0)}}
body.glitching #app{animation:glitch .1s 5;filter:saturate(1.4) hue-rotate(-8deg)}

/* CRT 开机动画 */
#app.poweron{animation:poweron .85s ease-out}
@keyframes poweron{0%{opacity:0;filter:brightness(3.5) blur(2px);transform:scaleY(.015)}
  35%{opacity:1;transform:scaleY(1.03)}55%{filter:brightness(.5)}75%{transform:scaleY(.99)}100%{filter:none;transform:none}}

/* 页面切换淡入 */
#content.page-enter{animation:pageIn .35s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 进度条 */
.pbar{display:inline-block;width:48px;height:6px;border:1px solid var(--line);border-radius:3px;
  vertical-align:middle;margin-left:7px;overflow:hidden;background:#0c0f0b}
.pbar i{display:block;height:100%;background:var(--green);box-shadow:0 0 6px var(--green);transition:width .5s ease}

/* 热词悬停故障 */
.hot:hover{animation:hotjit .22s steps(2) infinite;color:var(--green);background:rgba(124,252,138,.06)}
@keyframes hotjit{0%{text-shadow:1px 0 var(--red),-1px 0 var(--green-dim)}
  100%{text-shadow:-1px 0 var(--red),1px 0 var(--green-dim)}}

/* 打字机光标 */
.caret{display:inline-block;width:7px;height:1em;background:var(--green);
  vertical-align:-2px;margin-left:1px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* 收音机静电条 */
.radio-screen{position:relative;overflow:hidden}
.radio-screen::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(90deg, rgba(124,252,138,.6) 0 2px, transparent 2px 6px);
  animation:static 0.35s steps(4) infinite;mix-blend-mode:screen}
@keyframes static{0%{background-position:0 0}100%{background-position:24px 0}}
.radio-screen.locked::after{opacity:.05;animation:none;background:repeating-linear-gradient(90deg, rgba(124,252,138,.3) 0 1px, transparent 1px 10px)}

/* 真相档案 */
.truth-list{margin:12px 0;display:flex;flex-direction:column;gap:8px}
.truth-line{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.7;
  padding:7px 11px;border-left:2px solid var(--line)}
.truth-line.got{border-left-color:var(--green);color:var(--txt)}
.truth-line.redact{border-left-color:var(--dim);color:var(--dim);font-style:italic}
.truth-key{color:var(--green-dim)}
.truth-line.got .truth-key{color:var(--green)}
.truth-finale{margin-top:14px;padding:14px;border:1px dashed var(--green-dim);border-radius:6px;
  background:rgba(124,252,138,.04);animation:lineIn .6s both}
.truth-finale p{color:var(--txt)}

/* 结局逐行淡入 */
.ending p{animation:lineIn .5s both}
.ending p:nth-child(2){animation-delay:.18s}
.ending p:nth-child(3){animation-delay:.36s}
.ending p:nth-child(4){animation-delay:.54s}
.ending p:nth-child(5){animation-delay:.72s}
@keyframes lineIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 环境低语 */
#whisper{position:fixed;left:50%;bottom:66px;transform:translateX(-50%);z-index:9490;
  font-size:13px;letter-spacing:3px;color:var(--red);opacity:0;pointer-events:none;
  text-shadow:0 0 10px rgba(192,57,43,.85);transition:opacity 1.3s;font-style:italic}
#whisper.show{opacity:.72}