:root{
  --bg:#07090b; --bg2:#0c1014; --panel:#10161c; --panel2:#141b23;
  --line:#1e2a33; --line2:#2a3a46;
  --text:#c9d2da; --dim:#6d7a85; --faint:#44505a;
  --green:#7ef2b0; --green-dim:#3a7a5c;
  --red:#d94f4f; --red-dim:#5a2020;
  --paper:#d8cfba; --paper2:#c9bfa6;
  --link:#7fb3d9;
  --mono:Consolas,Menlo,"Courier New",monospace;
  --sans:-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  --serif:Georgia,"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  --hand:"KaiTi","STKaiti","楷体","Caveat",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:1.7;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(127,179,217,.25)}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
a[onclick],button[onclick]{cursor:pointer}
button{font-family:inherit; cursor:pointer}
input,textarea,select{font-family:inherit; background:var(--bg2); color:var(--text); border:1px solid var(--line); padding:8px 10px; border-radius:4px; font-size:14px; width:100%}
textarea{min-height:90px; resize:vertical}
input:focus,textarea:focus{outline:none; border-color:var(--line2)}
hr{border:none; border-top:1px solid var(--line); margin:14px 0}

/* ============ 进入门 ============ */
#gate{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%, #0c1116 0%, #050608 70%);
  text-align:center;}
.gate-inner{padding:30px; max-width:520px}
.gate-mark{font-size:90px; line-height:1; color:rgba(217,79,79,.16); font-family:var(--serif); margin-bottom:18px; letter-spacing:12px}
.gate-title{font-family:var(--serif); font-weight:normal; font-size:30px; letter-spacing:14px; color:#dfe6ec; margin-bottom:12px}
.gate-sub{color:var(--dim); font-size:13px; letter-spacing:2px; margin-bottom:6px}
.gate-sub.small{font-size:12px; color:var(--faint)}
.gate-hint{margin-top:26px; color:var(--faint); font-size:12px; letter-spacing:1px}
#gate-btn{margin-top:26px; font-size:16px; padding:12px 40px; letter-spacing:6px}

/* ============ 通用按钮 ============ */
.btn{background:transparent; color:var(--green); border:1px solid var(--green-dim); padding:9px 18px; border-radius:4px; letter-spacing:1px; font-size:14px; transition:all .15s}
.btn:hover{background:rgba(126,242,176,.08); border-color:var(--green)}
.btn.danger{color:var(--red); border-color:var(--red-dim)}
.btn.danger:hover{background:rgba(217,79,79,.08); border-color:var(--red)}
.btn.sm{padding:5px 12px; font-size:12px; letter-spacing:0}
.btn.primary{background:var(--green); color:#04130c; border:none; font-weight:bold}
.btn.ghost{color:var(--dim); border-color:var(--line)}
.btn.ghost:hover{color:var(--text); border-color:var(--line2)}
.btn.block{display:block; width:100%; margin:6px 0}
.btn:disabled{opacity:.4; cursor:not-allowed}

/* ============ HUD ============ */
#hud{position:fixed; top:0; left:0; right:0; z-index:90; display:flex; align-items:center; gap:12px;
  padding:8px 14px; background:rgba(7,9,11,.86); backdrop-filter:blur(4px);
  border-bottom:1px solid var(--line); font-size:12px;}
.hud-logo{font-family:var(--serif); letter-spacing:4px; color:var(--text); font-size:13px}
.hud-clues{color:var(--dim); letter-spacing:1px}
.hud-right{margin-left:auto; display:flex; gap:6px}
.hud-btn{background:transparent; color:var(--dim); border:1px solid var(--line); padding:4px 10px; border-radius:3px; font-size:12px}
.hud-btn:hover{color:var(--text); border-color:var(--line2)}
.hud-btn.danger:hover{color:var(--red); border-color:var(--red-dim)}

/* ============ 场景容器 ============ */
#app{max-width:980px; margin:0 auto; padding:64px 16px 80px}
#scene{animation:sceneIn .5s ease}
@keyframes sceneIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ============ Toast ============ */
#toast{position:fixed; top:54px; left:50%; transform:translateX(-50%) translateY(-30px); z-index:160;
  background:var(--bg2); border:1px solid var(--line2); color:var(--text); padding:10px 20px;
  border-radius:4px; font-size:13px; letter-spacing:1px; opacity:0; transition:all .3s; pointer-events:none; max-width:86vw; text-align:center}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.clue{border-color:var(--green-dim); color:var(--green)}

/* ============ 跳吓 / 叠层 ============ */
#scare{position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; background:#000; overflow:hidden}
#scare.show{display:flex}
#scare canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
#scare-text{position:relative; z-index:2; text-align:center; padding:20px; font-family:var(--serif); letter-spacing:6px; color:#e6eef5; font-size:20px; text-shadow:0 0 20px rgba(217,79,79,.6)}
#scare-text.dim{color:var(--dim); font-size:15px; letter-spacing:3px}
#scare-text.seenyou{font-size:clamp(48px,16vw,140px); color:#ff4444; letter-spacing:.15em;
  text-shadow:0 0 40px rgba(255,68,68,.95), 0 0 140px rgba(255,68,68,.6);
  font-family:var(--serif); font-weight:bold}
/* 满屏多个「看到你了」 */
#seenoverlay{position:fixed; inset:0; z-index:320; background:#000; display:none; overflow:hidden}
#seenoverlay.show{display:block}
#seenoverlay.flicker{animation:scareFlicker .16s steps(2) infinite}
.seen-you{position:absolute; color:#ff4444; font-family:var(--serif); font-weight:bold; white-space:nowrap;
  text-shadow:0 0 30px rgba(255,68,68,.95), 0 0 90px rgba(255,68,68,.55)}
@keyframes scareFlicker{0%{opacity:1}50%{opacity:.1}100%{opacity:1}}
#crt{position:fixed; inset:0; z-index:150; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); mix-blend-mode:multiply}
#crt::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%)}
#vignette{position:fixed; inset:0; z-index:140; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.55) 100%)}
#flashfade{position:fixed; inset:0; z-index:280; pointer-events:none; background:#fff; opacity:0}
body.shake #app{animation:shake .4s}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,-3px)}80%{transform:translate(3px,2px)}}
#gate.hidden,#app.hidden{display:none}

/* ============ 模态框 ============ */
#modal-mask{position:fixed; inset:0; z-index:170; background:rgba(2,3,4,.82); display:none; align-items:center; justify-content:center; padding:16px}
#modal-mask.show{display:flex}
#modal-box{background:var(--panel); border:1px solid var(--line2); border-radius:6px; max-width:760px; width:100%; max-height:86vh; overflow-y:auto; padding:22px; position:relative}
#modal-box .close-x{position:absolute; top:10px; right:14px; color:var(--dim); background:none; border:none; font-size:20px; cursor:pointer}
#modal-box .close-x:hover{color:var(--red)}

/* ============ 场景通用排版 ============ */
.scene-head{margin-bottom:22px}
.scene-kicker{font-size:11px; color:var(--red); letter-spacing:4px; margin-bottom:6px}
.scene-title{font-family:var(--serif); font-size:24px; font-weight:normal; color:#dfe6ec; letter-spacing:2px}
.scene-sub{color:var(--dim); font-size:13px; margin-top:4px}
.scene-text{color:var(--text); font-size:14px}
.scene-text p{margin:10px 0}
.dim{color:var(--dim)} .faint{color:var(--faint)} .green{color:var(--green)} .red{color:var(--red)}
.center{text-align:center}
.mono{font-family:var(--mono); font-size:13px}
.serif{font-family:var(--serif)}
.hand{font-family:var(--hand)}
.small{font-size:12px}
.actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:16px; margin:12px 0}
.card.dark{background:var(--bg2)}
.hintbox{border-left:3px solid var(--green-dim); background:rgba(126,242,176,.05); padding:10px 14px; margin:14px 0; font-size:13px; color:var(--green)}
.warnbox{border-left:3px solid var(--red-dim); background:rgba(217,79,79,.06); padding:10px 14px; margin:14px 0; font-size:13px; color:#e8a0a0}
.paperdoc{background:var(--paper); color:#26211a; padding:26px; border-radius:4px; font-family:var(--serif); line-height:2; box-shadow:0 6px 30px rgba(0,0,0,.4); font-size:15px}
.paperdoc h3{font-weight:normal; letter-spacing:6px; text-align:center; font-size:20px; margin-bottom:14px}
.paperdoc .meta{text-align:center; color:#6a6152; font-size:12px; margin-bottom:16px}
.divider{text-align:center; color:var(--faint); letter-spacing:10px; margin:18px 0}

/* 影像容器 */
.photo{background:#000; border:1px solid var(--line); border-radius:4px; overflow:hidden; margin:14px 0}
.photo img,.photo canvas{display:block; width:100%}
.photo .cap{padding:8px 12px; font-size:12px; color:var(--dim); background:var(--bg2)}
figure.imgfig{margin:14px 0; text-align:center}
figure.imgfig img{max-width:100%; border:1px solid var(--line); border-radius:4px}
figure.imgfig figcaption{font-size:12px; color:var(--dim); margin-top:6px}

/* 列表 */
.list{list-style:none}
.list li{padding:10px 4px; border-bottom:1px solid var(--line); font-size:14px; display:flex; gap:8px; align-items:flex-start}
.list li .tag{flex-shrink:0; font-size:10px; padding:2px 6px; border-radius:3px; letter-spacing:1px; margin-top:3px}
.list li .tag.t-new{background:var(--red-dim); color:#f0b9b9}
.list li .tag.t-old{background:var(--line2); color:var(--dim)}
.list li .tag.t-hot{background:rgba(217,79,79,.2); color:#f0b9b9; border:1px solid var(--red-dim)}

/* ============ 浏览器窗口模拟 ============ */
.browser{border:1px solid var(--line2); border-radius:8px; overflow:hidden; background:var(--bg2); margin:16px 0}
.browser-bar{display:flex; align-items:center; gap:8px; background:#151b21; padding:8px 12px; border-bottom:1px solid var(--line)}
.browser-dot{width:10px; height:10px; border-radius:50%; background:var(--line2)}
.browser-dot:nth-child(1){background:#e0563f}.browser-dot:nth-child(2){background:#e0b53f}.browser-dot:nth-child(3){background:#57c24a}
.browser-url{flex:1; background:var(--bg); border-radius:12px; padding:4px 12px; font-family:var(--mono); font-size:11px; color:var(--dim); border:1px solid var(--line)}
.browser-body{padding:0}
.site{background:#f4f1e8; color:#26221b; font-family:var(--serif)}
.site .nav{background:#2c3326; color:#e8e4d8; display:flex; gap:4px; padding:0 12px; flex-wrap:wrap}
.site .nav a{color:#e8e4d8; padding:10px 14px; font-size:13px; display:inline-block}
.site .nav a:hover{background:rgba(255,255,255,.08); text-decoration:none}
.site .site-head{text-align:center; padding:30px 20px 10px}
.site .site-head .site-name{font-size:30px; letter-spacing:14px; color:#1d2417}
.site .site-head .site-slogan{color:#8a857a; font-size:12px; letter-spacing:4px; margin-top:6px}
.site .site-body{padding:18px 24px 30px; color:#33312b}
.site .site-body h2{font-weight:normal; font-size:19px; letter-spacing:3px; border-bottom:2px solid #9c9484; padding-bottom:6px; margin-bottom:14px; color:#26221b}
.site .site-body p{margin:10px 0; font-size:14px; line-height:2}
.site .site-foot{border-top:1px solid #c8c1b2; text-align:center; padding:14px; color:#9a948a; font-size:11px; font-family:var(--sans)}
.site .site-foot .y1999{color:transparent}
.site-ico{display:inline-block; background:#7b8273; color:#f0ede3; font-size:10px; padding:2px 6px; border-radius:3px; margin-right:4px}

/* ============ 邮件界面 ============ */
.mail{margin:14px 0; border:1px solid var(--line2); border-radius:8px; overflow:hidden; background:var(--bg2)}
.mail-head{background:var(--panel); padding:12px 16px; border-bottom:1px solid var(--line)}
.mail-from{font-size:12px; color:var(--dim); margin-bottom:6px}
.mail-from b{color:var(--text); font-weight:normal}
.mail-subject{font-size:14px; color:var(--text)}
.mail-body{padding:16px; font-size:14px}
.mail-body .q{background:var(--panel); border-left:3px solid var(--line2); padding:10px 14px; margin:12px 0; font-family:var(--mono); font-size:12px; word-break:break-all; color:var(--dim)}
.attach{border:1px dashed var(--line2); padding:10px; margin:12px 0; display:flex; align-items:center; gap:10px; cursor:pointer; border-radius:4px}
.attach:hover{border-color:var(--green-dim)}
.attach .ic{font-size:20px}
.attach .at{font-size:13px; color:var(--text)}
.attach .ad{font-size:11px; color:var(--faint)}

/* ============ 论坛 ============ */
.forum{font-family:var(--sans); font-size:13px}
.forum .post{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px 14px; margin:10px 0; cursor:pointer}
.forum .post:hover{border-color:var(--line2)}
.forum .post .pt{font-size:14px; color:var(--text)}
.forum .post .pm{color:var(--dim); font-size:11px; margin-top:6px; display:flex; gap:14px}
.forum .avatar{width:34px; height:34px; border-radius:50%; background:#0f1519; border:1px solid var(--line2); float:left; margin-right:10px; overflow:hidden}
.forum .avatar canvas{width:100%; height:100%; display:block}

/* ============ 聊天界面 ============ */
.chat{max-width:560px; margin:14px auto; background:#0d1317; border:1px solid var(--line2); border-radius:8px; overflow:hidden}
.chat-head{background:var(--panel); padding:10px 14px; font-size:13px; color:var(--text); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px}
.chat-body{padding:14px 12px; min-height:260px}
.msg{display:flex; margin:10px 0; gap:8px}
.msg .bub{max-width:78%; padding:9px 12px; border-radius:8px; font-size:14px; line-height:1.65; word-break:break-word}
.msg.in{justify-content:flex-start}
.msg.in .bub{background:#1c262e; color:#d4dde3}
.msg.out{justify-content:flex-end}
.msg.out .bub{background:#12462f; color:#dff3e8}
.msg .who{font-size:10px; color:var(--faint); margin-bottom:2px}
.voice-bubble{background:rgba(126,242,176,.08); border:1px solid var(--green-dim); border-radius:14px; padding:6px 14px; display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; color:var(--green)}
.voice-bubble:hover{background:rgba(126,242,176,.15)}
.voice-bubble .vl{width:60px; height:18px; position:relative; overflow:hidden}
.voice-bubble .vl .bars{display:flex; gap:2px; align-items:flex-end; height:100%}
.voice-bubble .vl .bars i{flex:1; background:var(--green); animation:wave 1s infinite}
.voice-bubble .vl .bars i:nth-child(2){animation-delay:.2s}.voice-bubble .vl .bars i:nth-child(3){animation-delay:.4s}.voice-bubble .vl .bars i:nth-child(4){animation-delay:.1s}.voice-bubble .vl .bars i:nth-child(5){animation-delay:.3s}
@keyframes wave{0%,100%{height:20%}50%{height:100%}}
.msg .meta{font-size:10px; color:var(--faint); margin-top:3px}
.trans{font-size:11px; color:var(--dim); margin-top:4px; border-left:2px solid var(--line2); padding-left:8px}
.glitchline{color:var(--dim)}

/* ============ 摩斯 / 解码块 ============ */
.morse{font-family:var(--mono); letter-spacing:2px; word-break:break-all; line-height:2; color:var(--green); font-size:14px}
.codeblock{background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:14px; font-family:var(--mono); font-size:13px; white-space:pre-wrap; word-break:break-all; color:#cfe8da; margin:14px 0; line-height:1.8}
.codeblock .c{color:var(--faint)}
.codeblock .k{color:#e6b866}
.codeblock .str{color:#a8e6a0}
.codeblock .cmt{color:#5f7a6a; font-style:italic}
.codeblock .hd{display:block; font-size:11px; color:var(--faint); border-bottom:1px solid var(--line); padding-bottom:6px; margin-bottom:10px; font-family:var(--sans)}

/* 隐藏文字（需调滤镜/选区才可见） */
.hiddentext{color:rgba(150,150,150,.12)}
.hiddentext:hover{color:rgba(150,150,150,.5)}

/* ============ 滑块滤镜查看器 ============ */
.photoview{position:relative; background:#000; border:1px solid var(--line); border-radius:4px; overflow:hidden}
.photoview img,.photoview canvas{display:block; width:100%}
.photoview .sliders{position:absolute; bottom:0; left:0; right:0; background:rgba(5,7,9,.82); padding:12px; border-top:1px solid var(--line); backdrop-filter:blur(3px)}
.photoview .sliders label{font-size:11px; color:var(--dim); display:flex; align-items:center; gap:10px; margin:4px 0}
.photoview .sliders input[type=range]{flex:1; width:auto}
.photoview .sliders .val{width:52px; text-align:right; font-family:var(--mono); font-size:11px; color:var(--green)}

/* ============ 电话拨号 ============ */
.phone{max-width:300px; margin:16px auto; background:#10151a; border:1px solid var(--line2); border-radius:14px; padding:20px; text-align:center}
.phone .screen{background:#0a0e11; border:1px solid var(--line); border-radius:6px; min-height:54px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:22px; letter-spacing:6px; color:var(--green)}
.pad{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.pad button{background:var(--panel); border:1px solid var(--line2); color:var(--text); font-size:18px; padding:13px 0; border-radius:6px}
.pad button:hover{background:var(--panel2)}
.pad button.glyph{font-size:12px; color:var(--dim)}

/* ============ 日记 / 报纸 ============ */
.diary{position:relative; max-width:640px; margin:0 auto}
.diary .page{display:none}
.diary .page.on{display:block}
.diary-nav{display:flex; justify-content:space-between; margin-top:14px; align-items:center; color:var(--dim); font-size:12px}
.pgno{font-family:var(--mono); font-size:11px; color:var(--faint)}
.newspaper{background:#e9e4d6; color:#2a261f; padding:24px; font-family:var(--serif)}
.newspaper .np-head{text-align:center; border-bottom:2px solid #2a261f; padding-bottom:10px; margin-bottom:14px}
.newspaper .np-title{font-size:26px; letter-spacing:8px; font-weight:bold}
.newspaper .np-date{font-size:12px; margin-top:6px; color:#55503f}
.newspaper .np-cols{column-count:2; column-gap:20px; font-size:13px; line-height:1.9}
.newspaper .np-cols p{margin:6px 0; text-indent:2em}
.newspaper .yr{color:transparent}
.newspaper .yr.found{color:#b0392a; font-weight:bold}
.news-para{font-size:14px; line-height:2.1}

/* 藏字：新闻里的淡字 */
.ghost-char{color:rgba(217,79,79,.22); font-family:var(--serif)}
.ghost-char:hover{color:var(--red)}

/* ============ 灯柱信号 ============ */
.lamp-scene{background:#050807; border:1px solid var(--line); border-radius:8px; padding:26px; text-align:center; position:relative; overflow:hidden}
.lamp-scene .mount{color:#1a221c; font-size:12px; letter-spacing:8px}
.lamp{display:inline-block; width:120px; height:190px; position:relative; margin:18px auto}
.lamp .pole{position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:10px; height:150px; background:linear-gradient(180deg,#3a4638,#222a22)}
.lamp .head{position:absolute; top:0; left:50%; transform:translateX(-50%); width:44px; height:20px; background:#333e33; border-radius:4px}
.lamp .bulb{position:absolute; top:20px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; background:#161c16; transition:background .05s, box-shadow .05s}
.lamp .bulb.on{background:#eaffd8; box-shadow:0 0 26px 8px rgba(214,255,170,.85)}
.lamp-guide{font-size:12px; color:var(--dim); margin-top:6px}
.lamp-timeline{font-family:var(--mono); font-size:12px; color:var(--green); margin-top:14px; min-height:22px; letter-spacing:2px}
.tick-row{display:flex; justify-content:center; gap:3px; margin-top:10px; flex-wrap:wrap}
.tick-row .tick{width:12px; height:12px; border:1px solid var(--line2)}
.tick-row .tick.hit{background:var(--green)}
.tick-row .tick.off{background:var(--bg)}

/* ============ 监控 / 记录仪 ============ */
.cctv{background:#060d09; border:1px solid var(--line); border-radius:6px; overflow:hidden; position:relative}
.cctv canvas{display:block; width:100%}
.cctv .ts{position:absolute; top:8px; left:10px; font-family:var(--mono); font-size:11px; color:#9ff0c0; background:rgba(0,0,0,.4); padding:2px 6px; border-radius:3px}
.cctv .rec{position:absolute; top:8px; right:10px; font-size:11px; color:var(--red); letter-spacing:1px}
.cctv .rec::before{content:"●"; margin-right:4px; animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

/* ============ 对话树 ============ */
.dialog{border:1px solid var(--line2); border-radius:8px; overflow:hidden; background:var(--bg2)}
.dialog-head{background:var(--panel); padding:10px 14px; font-size:13px; border-bottom:1px solid var(--line)}
.dialog-body{padding:16px; min-height:150px}
.dialog-text{font-size:14px; margin-bottom:14px; color:#dbe3e9}
.dialog-opt{display:block; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line2); color:var(--text); padding:11px 14px; border-radius:6px; font-size:13px; margin:8px 0}
.dialog-opt:hover{background:var(--panel2); border-color:var(--green-dim)}
.trustbar{margin-top:8px}
.trustbar .seg{display:inline-block; width:16px; height:8px; margin-right:3px; background:var(--line)}
.trustbar .seg.on{background:var(--green)}

/* ============ 结局 / 演出 ============ */
.ending{min-height:70vh; display:flex; flex-direction:column; justify-content:center; max-width:720px; margin:0 auto; padding:40px 10px}
.ending .e-kicker{letter-spacing:8px; font-size:12px; color:var(--red); margin-bottom:20px; text-align:center}
.ending .e-title{font-family:var(--serif); font-size:30px; letter-spacing:10px; text-align:center; margin-bottom:28px; color:#e7edf3}
.ending .e-body{font-size:15px; line-height:2.1; color:#cdd6de}
.ending .e-body p{margin:12px 0}
.ending .e-foot{text-align:center; margin-top:36px; color:var(--faint); font-size:12px; letter-spacing:2px}
.black-screen{background:#000 !important; min-height:100vh}
.stats{display:flex; gap:20px; justify-content:center; margin:20px 0; flex-wrap:wrap}
.stats .stat{text-align:center}
.stats .stat .n{font-size:26px; color:var(--green); font-family:var(--mono)}
.stats .stat .l{font-size:11px; color:var(--faint); letter-spacing:2px; margin-top:4px}
.postcard{max-width:520px; margin:20px auto; background:#e7e0cd; color:#2a261f; padding:34px; border-radius:4px; font-family:var(--hand); font-size:17px; line-height:2.1; transform:rotate(-1deg); box-shadow:0 10px 40px rgba(0,0,0,.5)}
.postcard .pc-stamp{position:relative; float:right; width:64px; height:74px; border:2px dashed #8a8068; text-align:center; font-size:10px; color:#7a7060; padding-top:8px; margin:0 0 10px 14px}

/* ============ Glitch ============ */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; inset:0; overflow:hidden; clip-path:inset(20% 0 40% 0)}
.glitch::before{color:#3ae; transform:translate(-2px,-1px); animation:g1 .3s steps(2) infinite}
.glitch::after{color:#f48; transform:translate(2px,1px); animation:g2 .4s steps(2) infinite}
@keyframes g1{50%{clip-path:inset(60% 0 10% 0)}}
@keyframes g2{50%{clip-path:inset(10% 0 60% 0)}}
.glitch-slice{position:relative}
.glitch-slice .slice{position:absolute; left:0; right:0; background:inherit; opacity:.6; mix-blend-mode:screen}
@keyframes flicker{0%,19%,21%,100%{opacity:1}20%{opacity:.35}20.5%{opacity:1}55%{opacity:.8}}
.flicker{animation:flicker 3s infinite}
@keyframes textFlicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.2}94%{opacity:1}97%{opacity:.5}98%{opacity:1}}
.textflicker{animation:textFlicker 6s infinite}
@keyframes floatline{0%{transform:translateY(100vh); opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(-10vh); opacity:0}}
.floatline{position:fixed; left:12%; z-index:130; color:var(--red); font-family:var(--serif); font-size:13px; letter-spacing:6px; opacity:0; pointer-events:none; animation:floatline 9s linear infinite}
.floatline:nth-child(odd){animation-duration:12s; animation-delay:2s; left:70%}
.floatline:nth-child(3n){animation-duration:8s; left:45%}

/* 淡入 */
.fadein{animation:fadeIn .8s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tp{opacity:0; animation:tpIn .4s ease forwards}
@keyframes tpIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* 素材高亮 */
figure.imgfig.scan img{filter:contrast(1.1)}
.magnify{cursor:zoom-in}
.magnify.zoomed{cursor:zoom-out}
.zoombox{position:fixed; inset:0; z-index:190; background:#000; display:none; align-items:center; justify-content:center; padding:20px}
.zoombox.show{display:flex}
.zoombox img,.zoombox canvas{max-width:100%; max-height:100%}

/* 段落首字谜标记 */
.fisrtchar{color:rgba(127,179,217,.25)}
.fisrtchar:hover{color:var(--link)}

/* ============ 文件收集条 ============ */
#filerack{position:fixed; bottom:10px; left:10px; z-index:110; display:flex; align-items:center; gap:4px;
  background:rgba(7,9,11,.82); border:1px solid var(--line); border-radius:6px; padding:5px 8px; backdrop-filter:blur(3px)}
#filerack .fr-label{font-size:10px; color:var(--faint); letter-spacing:2px; margin-right:4px}
#filerack .fr-slot{width:20px; height:20px; line-height:20px; text-align:center; font-size:12px; font-family:var(--serif);
  border:1px solid var(--line2); border-radius:4px; color:var(--faint)}
#filerack .fr-slot.got{color:var(--green); border-color:var(--green-dim); background:rgba(126,242,176,.06)}

/* ============ 正式政务网站风格 ============ */
.gov-site{background:#f2efe6; color:#23201a; font-family:var(--serif); font-size:14px; line-height:1.95}
.gov-top{background:#8a1f1f; color:#f6e9d2; padding:16px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.gov-top .gov-logo{width:46px;height:46px;flex-shrink:0;background:#f6e9d2;color:#8a1f1f;font-size:22px;font-family:var(--serif);display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid #e8c97a}
.gov-top .gov-name{font-size:23px;letter-spacing:5px}
.gov-top .gov-en{font-size:11px;opacity:.8;letter-spacing:2px;margin-top:2px;font-family:var(--sans)}
.gov-nav{background:#6d1a1a; display:flex; gap:0; padding:0 10px; flex-wrap:wrap}
.gov-nav a{color:#f6e9d2; padding:10px 16px; font-size:13px; display:inline-block; letter-spacing:1px}
.gov-nav a:hover{background:rgba(255,255,255,.14); text-decoration:none}
.gov-bread{padding:7px 22px; font-size:12px; color:#7a6f5e; background:#edeade; border-bottom:1px solid #d8d2c2}
.gov-main{display:flex; gap:18px; padding:18px 22px; align-items:flex-start; flex-wrap:wrap}
.gov-main .gov-content{flex:1; min-width:280px; background:#fff; border:1px solid #ddd6c6; padding:22px; box-shadow:0 1px 4px rgba(0,0,0,.05)}
.gov-main .gov-side{width:220px; flex-shrink:0; display:flex; flex-direction:column; gap:14px}
.gov-panel{background:#fff; border:1px solid #ddd6c6; padding:13px}
.gov-panel h4{font-size:13px; color:#8a1f1f; border-bottom:2px solid #c9a227; padding-bottom:5px; margin-bottom:9px; font-weight:normal; letter-spacing:2px}
.gov-content h1{font-size:22px; color:#23201a; border-bottom:1px solid #c9c2b1; padding-bottom:10px; margin-bottom:14px; font-weight:normal; letter-spacing:2px}
.gov-content h2{font-size:17px; color:#6d1a1a; font-weight:normal; margin:16px 0 8px; letter-spacing:1px}
.gov-content p{margin:10px 0; text-align:justify}
.gov-table{width:100%; border-collapse:collapse; margin:12px 0; font-size:13px; font-family:var(--sans)}
.gov-table th,.gov-table td{border:1px solid #d3ccbb; padding:7px 10px; text-align:left}
.gov-table th{background:#edeade; font-weight:normal; color:#5a4a30}
.gov-notice{background:#fdf6e3; border:1px solid #e0cf9a; border-left:4px solid #c9a227; padding:12px 16px; margin:14px 0; font-size:13px; font-family:var(--sans)}
.gov-foot{border-top:2px solid #8a1f1f; background:#e6e1d3; text-align:center; padding:14px 10px; font-size:11px; color:#7a6f5e; font-family:var(--sans); line-height:2}
.gov-tag{display:inline-block; background:#8a1f1f; color:#f6e9d2; font-size:10px; padding:2px 7px; letter-spacing:1px; font-family:var(--sans)}
.gov-article-head{text-align:center; margin-bottom:16px}
.gov-article-head h1{font-size:21px; letter-spacing:2px; border:none; padding:0}
.gov-article-head .meta{font-size:12px; color:#7a6f5e; margin-top:6px; font-family:var(--sans)}
.gov-archive{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; font-family:var(--sans); font-size:12px}
.gov-archive a{color:#6d1a1a; border:1px solid #c9a227; background:#fbf6e8; padding:4px 10px; display:inline-block}
.gov-archive a:hover{background:#f2e6c2; text-decoration:none}

/* 响应式 */
@media(max-width:640px){
  body{font-size:14px}
  .scene-title{font-size:20px}
  .site .site-head .site-name{font-size:22px; letter-spacing:8px}
  .newspaper .np-cols{column-count:1}
  #hud .hud-logo{display:none}
  #app{padding:60px 10px 80px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important}
}
