/* ============================================================
   CRT 老屏幕实验层（叠加，不影响点击/不糊字）
   回滚：删掉本文件 + index.html 里的 <link> 和 #crt-screen 即可。
   想调强弱：改下面的 opacity / rgba / 模糊半径。
   ============================================================ */

#crt-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;      /* 盖在所有窗口/任务栏之上，像一层玻璃 */
  pointer-events: none; /* 点击穿透，不挡交互 */
  overflow: hidden;
}

/* 扫描线（调淡） */
#crt-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, 0.028) 2px 3px
  );
  mix-blend-mode: multiply;
}

/* 凸面感：中心玻璃高光（往外凸）+ 更重的桶形暗角 + 边缘红蓝散光 */
#crt-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(68% 52% at 50% 38%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 62%),
    radial-gradient(132% 116% at 50% 50%,
      rgba(0, 0, 0, 0) 44%,
      rgba(0, 0, 0, 0.18) 70%,
      rgba(0, 0, 0, 0.40) 86%,
      rgba(0, 0, 0, 0.72) 100%);
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.55),
    inset 9px 0 32px rgba(255, 70, 70, 0.09),    /* 左缘偏红散光 */
    inset -9px 0 32px rgba(70, 150, 255, 0.09),   /* 右缘偏蓝散光 */
    inset 0 0 150px rgba(150, 255, 200, 0.04);    /* 极弱绿辉 */
}

/* 缓慢滚动的亮带 + 极弱闪烁，增加“通电”感 */
.crt-roll {
  position: absolute;
  left: 0; right: 0; height: 28%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.035) 50%, rgba(255, 255, 255, 0) 100%);
  animation: crtRoll 7s linear infinite;
}
@keyframes crtRoll {
  0%   { top: -30%; }
  100% { top: 100%; }
}
#crt-screen { animation: crtFlicker 5s steps(40) infinite; }
@keyframes crtFlicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.985; }
}

@media (prefers-reduced-motion: reduce) {
  #crt-screen { animation: none; }
  .crt-roll { display: none; }
}

/* 关掉时隐藏整层 */
body.crt-off #crt-screen { display: none; }

/* 桌面右上角的开关 */
.crt-toggle {
  position: fixed;
  top: 10px; right: 12px;
  z-index: 100001;          /* 在 CRT 层之上，可点 */
  display: flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .5px;
  color: #dfe7df;
  background: rgba(18, 26, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.crt-toggle:hover { background: rgba(18, 26, 20, 0.78); }
.crt-led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #3a4a3e;
}
.crt-toggle.on .crt-led {
  background: #6cf08a;
  box-shadow: 0 0 7px rgba(108, 240, 138, 0.9);
}

/* 编辑控件（CRT 开关左侧） */
.edit-controls {
  position: fixed;
  top: 10px; right: 92px;
  z-index: 100001;
  display: flex; gap: 8px;
}
.pill-btn {
  padding: 5px 11px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .5px;
  color: #dfe7df;
  background: rgba(18, 26, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.pill-btn:hover { background: rgba(18, 26, 20, 0.78); }
.pill-btn.on { background: rgba(36, 94, 219, 0.8); border-color: rgba(255,255,255,.4); }

/* 编辑模式下可编辑字段的提示 */
body.edit-mode [data-edit] {
  outline: 1px dashed var(--xp-blue);
  outline-offset: 3px;
  border-radius: 2px;
  cursor: text;
}
body.edit-mode [data-edit]:focus {
  outline: 2px solid var(--xp-blue);
  background: #fffdf0;
}
body.edit-mode .g-caption:empty::before,
body.edit-mode .g-desc:empty::before {
  content: "（点此输入）";
  color: #bbb;
}