/* ============================================================
   午夜频率 MIDNIGHT FREQUENCY — CRT 恐怖视觉
   ============================================================ */
:root{
  --green:#8dffb0;
  --green-dim:#4e9e6f;
  --green-faint:#2c5e42;
  --amber:#ffb35c;
  --red:#ff5c5c;
  --screen-bg:#03150c;
  --panel:#0c110d;
  --panel-hi:#181f1a;
  --line:#26332a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#020303;
  color:var(--green);
  font-family:"Courier New",Consolas,"Noto Sans SC","Microsoft YaHei",monospace;
  overflow-x:hidden;
  letter-spacing:.04em;
}
/* 房间里唯一的光:来自收音机屏幕 */
#room-light{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 50% at 50% 46%, rgba(60,140,90,.10), transparent 70%);
  transition:opacity .3s;
}
body.power-flicker #room-light{opacity:.1}

#stage{
  position:relative;z-index:1;
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px 12px;
}
body.power-flicker #stage{animation:powerdown .35s steps(3)}
@keyframes powerdown{
  0%{filter:brightness(1)} 30%{filter:brightness(.15)} 55%{filter:brightness(.5)} 100%{filter:brightness(1)}
}

/* ---------- 屏幕切换 ---------- */
.screen{display:none;width:min(880px,96vw);flex-direction:column;align-items:center}
.screen.active{display:flex;animation:screenIn .5s}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hidden{display:none !important}

/* ---------- 通用按钮 ---------- */
.crt-btn{
  font:inherit;color:var(--green);letter-spacing:.3em;text-indent:.3em;
  background:transparent;border:1px solid var(--green-dim);
  padding:12px 30px;cursor:pointer;text-transform:uppercase;
  transition:all .2s;
}
.crt-btn:hover{
  border-color:var(--green);
  box-shadow:0 0 14px rgba(110,255,160,.25), inset 0 0 14px rgba(110,255,160,.12);
  text-shadow:0 0 8px rgba(141,255,176,.8);
}
.crt-btn.big{font-size:18px;padding:16px 44px}
.crt-btn.ghost{opacity:.55}
.crt-btn.ghost:hover{opacity:.9}

/* ---------- CRT 屏幕通用 ---------- */
.crt{
  position:relative;width:100%;
  background:var(--screen-bg);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.85),
    inset 0 0 18px rgba(20,80,45,.35),
    0 0 34px rgba(50,200,110,.07);
  overflow:hidden;
}
.crt .scanlines{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
  animation:crtFlicker 4.2s infinite;
}
.crt .noise{
  position:absolute;inset:-40px;pointer-events:none;z-index:4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.10;mix-blend-mode:screen;
  animation:noiseShift .45s steps(6) infinite;
}
.crt .vignette{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  border-radius:10px;
}
@keyframes crtFlicker{
  0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:.75} 94%{opacity:1} 97%{opacity:.88} 98%{opacity:1}
}
@keyframes noiseShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-24px,12px)}
  40%{transform:translate(16px,-20px)} 60%{transform:translate(-10px,-6px)}
  80%{transform:translate(22px,18px)} 100%{transform:translate(0,0)}
}
/* 文本区域(开场/结局) */
.type-area{
  min-height:300px;padding:34px 38px;
  font-size:16px;line-height:2.1;
  cursor:pointer;
}
.type-area.bad{--green:#ff8a8a;--screen-bg:#160606;color:#ff8a8a}
.type-area .narr{color:#9fd8b4}
.type-area .narr-bad{color:#d98a8a}
.type-area .host,.display-host{
  color:var(--green);
  border-left:2px solid var(--green-faint);
  padding-left:12px;margin:4px 0;
  text-shadow:0 0 7px rgba(141,255,176,.45);
}
.host-final{color:var(--amber) !important;border-left-color:#6b4a20 !important;
  text-shadow:0 0 10px rgba(255,179,92,.55) !important}
.caret{
  display:inline-block;width:.62em;height:1.05em;background:currentColor;
  vertical-align:-3px;margin-left:2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ---------- 开机画面 ---------- */
#screen-boot{gap:34px;text-align:center;padding:40px 0}
.boot-brand{
  font-size:clamp(26px,5vw,44px);letter-spacing:.35em;color:var(--green);
  text-shadow:0 0 18px rgba(141,255,176,.5), 0 0 60px rgba(141,255,176,.2);
  display:flex;flex-direction:column;gap:14px;
  animation:brandBreath 5s ease-in-out infinite;
}
.boot-brand span{font-size:.45em;letter-spacing:.9em;text-indent:.9em;color:var(--green-dim)}
@keyframes brandBreath{0%,100%{opacity:.85}50%{opacity:1}}
.boot-warn{color:#6b7f71;font-size:13px;line-height:2;opacity:.8}

/* ---------- 开场 ---------- */
#screen-intro{gap:26px}
#name-form{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
  width:100%;
}
#name-form label{color:var(--green-dim);font-size:14px;letter-spacing:.2em}
#name-input{
  font:inherit;font-size:18px;color:var(--green);
  background:rgba(20,60,38,.25);border:1px solid var(--green-dim);
  padding:10px 16px;width:240px;text-align:center;letter-spacing:.15em;
  outline:none;
}
#name-input:focus{border-color:var(--green);box-shadow:0 0 12px rgba(110,255,160,.2)}

/* ---------- 收音机机身 ---------- */
.device{
  width:100%;
  background:linear-gradient(175deg, var(--panel-hi), var(--panel) 40%, #070a08);
  border:1px solid #2a332c;border-radius:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -20px 40px rgba(0,0,0,.6),
    0 30px 80px rgba(0,0,0,.8),
    0 0 50px rgba(60,200,110,.06);
  padding:18px 20px 14px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
}
.device.shake{animation:shake .35s}
@keyframes shake{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-4px,2px)}
  40%{transform:translate(4px,-2px)} 60%{transform:translate(-3px,-1px)} 80%{transform:translate(3px,1px)}
}
.topbar{
  display:flex;align-items:center;gap:18px;
  font-size:13px;color:var(--green-dim);
  padding:2px 6px;
}
.onair{display:flex;align-items:center;gap:8px;letter-spacing:.2em;color:#7c8a80}
.onair i{
  width:9px;height:9px;border-radius:50%;background:#3a453d;
  display:inline-block;
}
.onair.live{color:var(--red);text-shadow:0 0 8px rgba(255,92,92,.6)}
.onair.live i{background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.1s steps(1) infinite}
.clock{
  font-size:22px;color:var(--amber);
  font-variant-numeric:tabular-nums;letter-spacing:.12em;
  text-shadow:0 0 10px rgba(255,179,92,.45);
}
.clock.urgent{color:var(--red);animation:urgentPulse 1s infinite}
@keyframes urgentPulse{0%,100%{opacity:1}50%{opacity:.45}}
.listener{margin-left:auto;font-size:12px}
.icon-btn{
  background:transparent;border:1px solid var(--line);color:var(--green-dim);
  width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:15px;
}
.icon-btn:hover{border-color:var(--green-dim)}

/* 主显示屏 */
#display{height:min(430px,52vh)}
#display-scroll{
  position:absolute;inset:0;overflow-y:auto;z-index:2;
  padding:26px 30px;font-size:15px;line-height:2.05;
  scroll-behavior:smooth;
}
#display-scroll::-webkit-scrollbar{width:6px}
#display-scroll::-webkit-scrollbar-thumb{background:var(--green-faint);border-radius:3px}
#display-content{min-height:100%}
#display-content .st-head{
  color:var(--amber);letter-spacing:.25em;margin-bottom:8px;
  text-shadow:0 0 8px rgba(255,179,92,.4);
}
#display-content .letter-head{color:var(--green-dim);margin-top:14px}
#display-content .letter-body{color:#a8dcb9;padding-left:14px}
#display-content .ad,#display-content .ad-meta{color:#a8dcb9}
#display-content .ad-meta{color:var(--green-dim);font-size:13px}
#display-content .err{color:var(--red);text-shadow:0 0 8px rgba(255,92,92,.4)}
#display-content .whisper-line{
  color:#3f6b52;font-style:italic;opacity:.85;
}
#display-content .ok{color:var(--amber)}
#display-content .fragment{
  margin:8px 0;padding:7px 10px;border-left:2px solid var(--red);
  color:#ff8a8a;background:rgba(100,15,20,.12);letter-spacing:.12em;
}
#display-content .static-idle{color:#33553f;letter-spacing:.35em}

/* 键盘 / 输入区 */
.keypad{
  margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  animation:fadeUp .5s;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.keypad input{
  font:inherit;font-size:17px;color:var(--green);letter-spacing:.3em;
  background:rgba(20,60,38,.2);border:1px solid var(--green-dim);
  padding:9px 14px;width:230px;outline:none;text-align:center;
}
.keypad input:focus{border-color:var(--green);box-shadow:0 0 12px rgba(110,255,160,.2)}
.ch-btns{display:flex;gap:12px;margin-top:16px}
.ch-btn{
  font:inherit;color:var(--green-dim);background:transparent;
  border:1px solid var(--line);padding:9px 22px;cursor:pointer;letter-spacing:.15em;
}
.ch-btn:hover{color:var(--green)}
.ch-btn.active{color:var(--amber);border-color:var(--amber);box-shadow:0 0 10px rgba(255,179,92,.25)}
.ch-btn:disabled{opacity:.35;cursor:wait}
.ch-display{margin-top:14px;padding:12px 16px;border:1px dashed var(--green-faint);min-height:64px;color:#a8dcb9}

/* ---------- 调频区 ---------- */
.freq-zone{
  display:flex;align-items:center;gap:22px;
  padding:10px 14px 6px;
}
.readout-block{min-width:150px;display:flex;flex-direction:column;gap:5px}
.readout{
  font-size:30px;color:var(--amber);font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(255,179,92,.5);
  display:flex;align-items:baseline;gap:6px;
}
.readout small{font-size:12px;color:var(--green-dim);letter-spacing:.2em}
.signal-meter{display:flex;align-items:center;gap:9px;height:14px;color:#496552}
.signal-meter small{font-size:9px;letter-spacing:.12em;white-space:nowrap}
.signal-bars{height:12px;display:flex;align-items:flex-end;gap:2px}
.signal-bars i{display:block;width:3px;background:#294334;opacity:.45}
.signal-bars i:nth-child(1){height:4px}.signal-bars i:nth-child(2){height:6px}
.signal-bars i:nth-child(3){height:8px}.signal-bars i:nth-child(4){height:10px}
.signal-bars i:nth-child(5){height:12px}
.signal-meter[data-level="1"] .signal-bars i:nth-child(-n+1),
.signal-meter[data-level="2"] .signal-bars i:nth-child(-n+2),
.signal-meter[data-level="3"] .signal-bars i:nth-child(-n+3),
.signal-meter[data-level="4"] .signal-bars i:nth-child(-n+4),
.signal-meter[data-level="5"] .signal-bars i:nth-child(-n+5){background:var(--amber);opacity:1;box-shadow:0 0 5px rgba(255,179,92,.45)}
.signal-meter[data-level="5"] small{color:var(--amber)}
.dial-wrap{position:relative;flex:1;padding-bottom:26px}
#dial{
  -webkit-appearance:none;appearance:none;
  width:100%;height:34px;background:transparent;cursor:pointer;
  position:relative;z-index:3;margin:0;
}
#dial::-webkit-slider-runnable-track{
  height:34px;background:transparent;
}
#dial::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:4px;height:34px;background:var(--red);
  box-shadow:0 0 10px rgba(255,92,92,.8);
  border:none;border-radius:2px;margin-top:0;
}
#dial::-moz-range-track{height:34px;background:transparent}
#dial::-moz-range-thumb{
  width:4px;height:34px;background:var(--red);border:none;border-radius:2px;
  box-shadow:0 0 10px rgba(255,92,92,.8);
}
.dial-scale{
  position:absolute;left:0;right:0;top:12px;height:10px;z-index:1;
  background:
    repeating-linear-gradient(90deg, var(--green-faint) 0 1px, transparent 1px 10px),
    linear-gradient(90deg, #071009 0 8.7%, #0b1a10 8.7%, #0b1a10 66%, #0e2416 66%, #0b1a10 91.7%, #071009 91.7%);
  border-radius:4px;border:1px solid var(--line);
}
.ticks{position:absolute;left:0;right:0;top:44px;height:16px;z-index:1}
.ticks i{
  position:absolute;transform:translateX(-50%);
  font-style:normal;font-size:11px;color:var(--green-dim);letter-spacing:.05em;
  opacity:0;transition:opacity .35s,color .35s;white-space:nowrap;
}
.ticks i.known{opacity:1}
.deadzone-label{
  position:absolute;left:0;top:62px;font-size:10px;color:#3a453d;letter-spacing:.15em;
  transition:color .5s;
}
.deadzone-label.live{color:var(--red);text-shadow:0 0 8px rgba(255,92,92,.5);animation:blink 1.4s steps(1) infinite}
.deadzone-label.relay{color:var(--amber);text-shadow:0 0 8px rgba(255,179,92,.45)}
.device-plate{
  text-align:center;font-size:10px;color:#3a453d;letter-spacing:.4em;
  padding-top:2px;
}

/* ---------- 来电抉择 ---------- */
#modal{
  position:fixed;inset:0;z-index:40;
  background:rgba(1,4,2,.82);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-panel{
  width:min(560px,94vw);
  background:#060c08;border:1px solid var(--green-dim);border-radius:10px;
  box-shadow:0 0 40px rgba(60,220,120,.15), inset 0 0 30px rgba(0,0,0,.7);
  padding:28px 30px;font-size:15px;line-height:2;
  animation:fadeUp .4s, modalRing .8s 3;
}
@keyframes modalRing{0%,100%{box-shadow:0 0 40px rgba(60,220,120,.15)}50%{box-shadow:0 0 60px rgba(255,92,92,.3)}}
.modal-title{color:var(--red);letter-spacing:.3em;margin-bottom:12px;font-size:13px}
#modal-text{color:#a8dcb9;min-height:80px}
.modal-actions{display:flex;gap:16px;margin-top:22px;justify-content:center}

/* ---------- 扣时闪现 ---------- */
#deduct-flash{
  position:fixed;z-index:50;inset:0;
  display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;
  pointer-events:none;
  font-size:64px;color:var(--red);letter-spacing:.1em;
  text-shadow:0 0 30px rgba(255,60,60,.7);
  animation:deductFade 1.8s forwards;
}
#deduct-flash span{font-size:15px;letter-spacing:.4em;opacity:.85}
@keyframes deductFade{
  0%{opacity:0;transform:scale(.92)} 15%{opacity:1;transform:scale(1)}
  70%{opacity:1} 100%{opacity:0}
}

/* ---------- 闪现的脸 ---------- */
#face-flash{
  position:fixed;inset:0;z-index:60;background:#000;
  display:none;align-items:center;justify-content:center;
}
#face-flash.on{display:flex}
#face-flash .face{
  width:44vmin;height:76vmin;position:relative;
  filter:blur(1.5px) contrast(1.2);opacity:.92;
}
#face-flash .face::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 58% at 50% 46%, #191d1a 0%, #0b0e0c 58%, transparent 74%);
}
#face-flash .face::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 8% 15% at 37% 40%, #000 42%, transparent 62%),
    radial-gradient(ellipse 8% 15% at 63% 40%, #000 42%, transparent 62%),
    radial-gradient(ellipse 6% 26% at 50% 68%, #000 40%, transparent 60%);
}
#presence{
  position:fixed;z-index:58;right:3vw;top:18vh;max-width:min(360px,88vw);
  color:#a73f48;font-size:13px;letter-spacing:.28em;text-align:right;
  text-shadow:0 0 12px rgba(255,40,60,.75);opacity:0;pointer-events:none;
}
#presence.on{animation:presenceIn 1.8s steps(2) forwards}
@keyframes presenceIn{
  0%{opacity:0;transform:translateX(8px)}
  14%,68%{opacity:.9;transform:none}
  72%{opacity:.15;transform:translateX(-3px)}
  100%{opacity:0}
}

/* ---------- 结局卡片 ---------- */
#screen-final,#screen-over{gap:26px}
#final-card,#over-actions{text-align:center;animation:fadeUp 1.2s}
#final-card h1{
  font-size:clamp(30px,6vw,52px);letter-spacing:.5em;text-indent:.5em;color:var(--amber);
  text-shadow:0 0 24px rgba(255,179,92,.5);
}
#final-card p{color:var(--green-dim);margin:16px 0 30px;letter-spacing:.3em}

/* ---------- 压迫感累积(多次答错后) ---------- */
body.dread #room-light{
  background:radial-gradient(ellipse 60% 50% at 50% 46%, rgba(150,40,40,.13), transparent 70%);
  animation:roomPulse 3.4s ease-in-out infinite;
}
@keyframes roomPulse{0%,100%{opacity:.7}50%{opacity:1}}
body.dread .crt .vignette{
  background:radial-gradient(ellipse 90% 80% at 50% 50%, transparent 50%, rgba(60,0,0,.5) 100%);
}

/* ---------- 扩展谜题 UI ---------- */
/* 在线人数 */
.online{font-size:11px;color:#5c7263;letter-spacing:.1em;font-variant-numeric:tabular-nums}

/* 第二排小刻度 */
.ticks{height:30px}
.ticks i.mini{top:14px;font-size:9px;color:#3b5245}
.deadzone-label{top:78px}
.dial-wrap{padding-bottom:40px}

/* 90.2 显影信:涂黑字句,鼠标光源照亮 */
.uv-letter{
  position:relative;margin-top:10px;padding:12px 16px;
  border:1px dashed #3b5245;color:#a8dcb9;line-height:2.1;
  overflow:hidden;cursor:crosshair;animation:fadeUp .6s;
}
.uv-letter .redact{
  background:#040705;color:transparent;border-radius:2px;padding:0 2px;
  transition:color .12s;
}
.uv-letter .redact.lit{
  background:rgba(30,5,5,.4);color:#ff8484;
  text-shadow:0 0 8px rgba(255,90,90,.55);
}
.uv-letter .redact.found{
  background:rgba(35,8,8,.72);color:#b85e5e;
  box-shadow:inset 0 -1px rgba(255,92,92,.22);
}
.uv-letter .redact.found.lit{color:#ff9292}
.reveal-progress,.phase-status{
  margin-top:10px;color:var(--green-dim);font-size:12px;letter-spacing:.1em;
}
.phase-status span.done,.phase-status b{color:var(--amber);font-weight:normal}
.uv-glow{
  position:absolute;left:-999px;top:-999px;
  width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,110,110,.17), transparent 65%);
  pointer-events:none;
}

/* 98.4 摩尔斯点播 */
.morse-chart{
  margin-top:10px;padding:10px 16px;border:1px dashed #33473b;
  display:grid;grid-template-columns:repeat(4,auto);gap:4px 26px;
  font-size:13px;color:#7fa98c;animation:fadeUp .6s;
}
.request-card{
  margin-top:12px;padding:10px 16px;border:1px solid #2a3a30;
  color:#a8dcb9;font-size:14px;line-height:1.9;animation:fadeUp .6s;
}
.request-card .note{color:var(--amber)}
.morse-row{display:flex;align-items:center;gap:16px;margin-top:14px}
.morse-lamp{
  width:16px;height:16px;border-radius:50%;background:#1c2620;
  border:1px solid #33473b;flex:none;
}
.morse-lamp.on{
  background:var(--amber);
  box-shadow:0 0 18px rgba(255,179,92,.9), 0 0 42px rgba(255,179,92,.4);
}
.morse-status{font-size:12px;color:var(--green-dim);letter-spacing:.1em}

/* 103.7 心跳 */
.heart-zone{margin-top:16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.heart-dot{width:14px;height:14px;border-radius:50%;background:#5a2020;flex:none}
.heart-dot.pump{animation:pump .45s ease-out}
@keyframes pump{
  0%{transform:scale(1.9);background:#ff5c5c;box-shadow:0 0 26px rgba(255,70,70,.95)}
  100%{transform:scale(1);background:#5a2020}
}
.heart-stop{border-color:#7a3535;color:#ff8a8a}
.heart-stop:hover{
  border-color:var(--red);
  box-shadow:0 0 14px rgba(255,60,60,.3);
  text-shadow:0 0 8px rgba(255,90,90,.8);
}
.heart-status{font-size:12px;color:var(--green-dim);letter-spacing:.1em}

/* 结局抉择 */
#final-choice{margin-top:20px;text-align:center;animation:fadeUp .6s}
#final-choice .fc-title{color:var(--green);margin-bottom:18px;line-height:2.1;text-shadow:0 0 8px rgba(141,255,176,.4)}
.fc-btns{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}

/* 频率读数闹鬼 */
#freq-num.ghost{color:var(--red);text-shadow:0 0 16px rgba(255,60,60,.9)}

/* 一瞬间负片闪帧 */
#stage.invert{filter:invert(1) hue-rotate(150deg)}

/* 上一位主持人 */
.boot-hosted{
  color:#b05555;font-size:13px;letter-spacing:.2em;
  text-shadow:0 0 10px rgba(255,80,80,.3);
  animation:blink 2.3s steps(1) infinite;
}

/* ---------- 借鉴 echo-puzzle 的特效 ---------- */
/* 分级 glitch 撕裂(时长编码强度) */
#stage.glitch-1{animation:glitchShift .16s steps(2) 1}
#stage.glitch-2{animation:glitchShift .3s steps(3) 1}
#stage.glitch-3{animation:glitchShift .68s steps(6) 1}
@keyframes glitchShift{
  0%{transform:none;filter:none}
  15%{transform:translate(-7px,3px);filter:hue-rotate(90deg) saturate(2.4)}
  30%{transform:translate(6px,-4px);filter:none}
  45%{transform:translate(-5px,-2px);filter:hue-rotate(-70deg) contrast(1.4)}
  60%{transform:translate(4px,3px);filter:none}
  80%{transform:translate(-2px,1px)}
  100%{transform:none;filter:none}
}

/* 对/错全屏反馈闪烁 */
#fx-flash{
  position:fixed;inset:0;z-index:45;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;letter-spacing:.35em;text-indent:.35em;
}
#fx-flash.grant{background:rgba(60,255,130,.10);color:#8dffb0;animation:flashFade .95s forwards}
#fx-flash.deny{background:rgba(255,40,60,.13);color:#ff8a8a;animation:flashFade .95s forwards}
@keyframes flashFade{0%{opacity:0}12%{opacity:1}78%{opacity:.85}100%{opacity:0}}

/* 标题红蓝错位(每 4 秒瞬闪 3 帧,纯 CSS) */
.boot-brand{position:relative;cursor:pointer}
.boot-brand:hover{text-shadow:0 0 26px rgba(141,255,176,.9)}
.boot-brand::before,.boot-brand::after{
  content:attr(data-text);position:absolute;left:0;right:0;top:0;
  width:100%;text-align:center;letter-spacing:inherit;
  opacity:0;pointer-events:none;
}
.boot-brand::before{color:#ff0040;animation:titleGlitchA 4s infinite}
.boot-brand::after{color:#00d4ff;animation:titleGlitchB 4s infinite}
@keyframes titleGlitchA{
  0%,88%,97%,100%{opacity:0}
  89%{opacity:.85;transform:translate(-4px,-2px);clip-path:polygon(0 0,100% 0,100% 34%,0 34%)}
  93%{opacity:.6;transform:translate(3px,1px);clip-path:polygon(0 62%,100% 62%,100% 100%,0 100%)}
}
@keyframes titleGlitchB{
  0%,90%,98%,100%{opacity:0}
  91%{opacity:.7;transform:translate(4px,2px);clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%)}
  95%{opacity:.5;transform:translate(-3px,-1px);clip-path:polygon(0 0,100% 0,100% 30%,0 30%)}
}

/* 静态分隔符 ··· 沙···沙··· */
.static-div{
  color:#3f6b52;opacity:.55;font-size:12px;
  letter-spacing:.5em;text-align:center;margin:6px 0;
  animation:staticFlick 1.3s infinite;
}
@keyframes staticFlick{0%,100%{opacity:.25}50%{opacity:.7}}

/* 危机红光(最后五分钟,与心跳同步呼吸) */
.device.crisis::after{
  content:'';position:absolute;inset:0;border-radius:18px;
  pointer-events:none;animation:crisisBreathe 1s ease-in-out infinite;
}
@keyframes crisisBreathe{
  0%,100%{box-shadow:inset 0 0 60px rgba(255,20,60,.10)}
  50%{box-shadow:inset 0 0 115px rgba(255,20,60,.32)}
}

/* ---------- 档案室 ---------- */
#archive-modal{
  position:fixed;inset:0;z-index:42;
  background:rgba(1,4,2,.86);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.archive-panel{
  width:min(620px,94vw);max-height:84vh;display:flex;flex-direction:column;
  background:#060c08;border:1px solid var(--green-dim);border-radius:10px;
  box-shadow:0 0 40px rgba(60,220,120,.12), inset 0 0 30px rgba(0,0,0,.7);
  padding:24px 26px;animation:fadeUp .4s;
}
.archive-head{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.archive-title{color:var(--amber);letter-spacing:.3em;font-size:16px;text-shadow:0 0 10px rgba(255,179,92,.4)}
.archive-sub{color:#5c7263;font-size:11px;letter-spacing:.2em}
#archive-list{overflow-y:auto;margin:14px 0;padding-right:6px;flex:1}
#archive-list::-webkit-scrollbar{width:6px}
#archive-list::-webkit-scrollbar-thumb{background:var(--green-faint);border-radius:3px}
.arch-item{border:1px solid #223328;border-radius:6px;padding:10px 14px;margin-bottom:10px;animation:fadeUp .4s}
.arch-item.locked{opacity:.45}
.arch-item.special{border-color:#6b3535}
.arch-head{display:flex;gap:12px;align-items:baseline}
.arch-no{font-size:11px;color:var(--green-dim);letter-spacing:.15em;flex:none}
.arch-title{color:var(--green);letter-spacing:.1em}
.arch-freq{margin-left:auto;font-size:11px;color:var(--amber);font-variant-numeric:tabular-nums}
.arch-detail{margin-top:6px;font-size:13px;color:#8fbfa0;line-height:1.9}

/* 署名 */
.byline{color:#4e6656;font-size:11px;letter-spacing:.35em;text-align:center}
#boot-egg{
  color:var(--green);font-size:13px;letter-spacing:.15em;min-height:20px;
  text-align:center;text-shadow:0 0 8px rgba(141,255,176,.5);
}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .type-area{padding:22px 18px;font-size:14px}
  #display-scroll{padding:18px 16px;font-size:14px}
  #display-content .st-head{letter-spacing:.12em}
  .freq-zone{flex-direction:column;gap:6px}
  .readout-block{min-width:0;align-items:center}
  .ticks i{font-size:8px;letter-spacing:0}
  .ticks i.mini{display:block;top:13px}
  .topbar{display:grid;grid-template-columns:max-content max-content 1fr 32px 32px;gap:6px}
  .onair{grid-column:1;white-space:nowrap}.clock{grid-column:2;white-space:nowrap}
  #btn-archive{grid-column:4}#btn-mute{grid-column:5}
  .listener{grid-column:1/4;grid-row:2;margin-left:0;font-size:11px}
  .online{grid-column:4/6;grid-row:2;text-align:right}
}