/* SealChat CRT 质感层 v1
 * 只在 <html data-sc-crt> 时生效（由 crt.js 根据主题名自动切换），平时完全不起作用。
 * 颜色全部取自当前主题：绿磷主题就是绿光，琥珀主题就是琥珀光，白磷主题就是白光。
 * 改完本文件后，浏览器刷新即可生效，不用重启任何容器。 */

html[data-sc-crt] {
  /* ======== 可调参数 ======== */
  --crt-scanline: 0.22;     /* 横向扫描线深浅  0 ~ 0.5   */
  --crt-grille: 0.09;       /* 纵向荫罩栅格    0 ~ 0.3   */
  --crt-vignette: 0.6;      /* 四角暗角        0 ~ 1     */
  --crt-roll: 0.05;         /* 缓慢滚动的亮带  0 ~ 0.15，0 为关闭 */
  --crt-glow: 4px;          /* 文字辉光半径    0px 为关闭 */
  --crt-glow-alpha: 45%;    /* 文字辉光浓度    */
  /* ========================== */

  --crt-phosphor: var(--sc-text-primary, #33ff66);
  /* 必须有实色背景，否则下面的单色化层会在空白处糊成一片 */
  background-color: var(--sc-bg-surface, #050b06);
}

/* 文字辉光（会继承到全站文字） */
html[data-sc-crt] body {
  text-shadow: 0 0 var(--crt-glow) color-mix(in srgb, var(--crt-phosphor) var(--crt-glow-alpha), transparent);
}

/* 直角化：80 年代的屏幕上没有圆角。想保留圆角就删掉这一段 */
html[data-sc-crt] :where(*) {
  border-radius: 0 !important;
}

/* 毛玻璃效果在 CRT 上没有意义，关掉也更省性能 */
html[data-sc-crt] :where(*) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 图片、视频、画布压一点对比度，模拟低灰阶显像管 */
html[data-sc-crt] :where(img, video, canvas) {
  filter: contrast(1.3) brightness(0.92);
}

/* 单色化层（叠在最上面，连下面的扫描线一起染色）。保留下方内容的明暗，把颜色统一换成磷光色，
   所以头像、图片、表情、弹窗、图表都会变成单色，程序以后新加的界面也一样 */
html[data-sc-crt]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background: var(--crt-phosphor);
  mix-blend-mode: color;
}

/* 质感层：暗角 + 滚动亮带 + 荫罩栅格 + 扫描线 */
html[data-sc-crt]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background-image:
    radial-gradient(120% 100% at 50% 50%, transparent 52%, rgba(0, 0, 0, var(--crt-vignette)) 100%),
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, var(--crt-roll)) 50%, transparent 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, var(--crt-grille)) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, var(--crt-scanline)) 0 1px, transparent 1px 3px);
  background-size: 100% 100%, 100% 26vh, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-position: 0 0, 0 -30vh, 0 0, 0 0;
  animation: sc-crt-roll 8s linear infinite, sc-crt-flicker 3.7s steps(24) infinite;
}

@keyframes sc-crt-roll {
  from { background-position: 0 0, 0 -30vh, 0 0, 0 0; }
  to   { background-position: 0 0, 0 130vh, 0 0, 0 0; }
}

@keyframes sc-crt-flicker {
  0%, 100% { opacity: 1; }
  12% { opacity: 0.97; }
  35% { opacity: 1; }
  52% { opacity: 0.95; }
  70% { opacity: 1; }
  88% { opacity: 0.98; }
}

/* 手机 / 平板：减弱效果、关掉动画，省电也省性能 */
@media (pointer: coarse) {
  html[data-sc-crt] {
    --crt-scanline: 0.12;
    --crt-grille: 0;
    --crt-roll: 0;
    --crt-glow: 2px;
  }
  html[data-sc-crt]::after { animation: none; }
}

/* 系统开启了「减少动态效果」时不闪烁 */
@media (prefers-reduced-motion: reduce) {
  html[data-sc-crt]::after { animation: none; }
}

/* 打印 / 导出为 PDF 时不带效果 */
@media print {
  html[data-sc-crt]::before,
  html[data-sc-crt]::after { display: none; }
}