/* CRT 荧幕：早期 Macintosh 界面 + 老显像管（扫描线、辉光、圆角暗边）。
   配色参考 tait-crt-interface-skill 的示例图，两套：蓝鸽（极客02a）、棋局（游戏02a）。
   两套共用下面的规则，只在开头换颜色变量 */
html[data-theme="crt-dove"] {
  --paper: #e8e5df;   /* 窗口底色 */
  --field: #f3f1ec;   /* 输入框、聊天记录底色 */
  --field2: #dde9e1;  /* 私聊记录、思考框等次一级的底色 */
  --ink: #0d3d2d;     /* 线条和文字 */
  --acc: #2ca770;     /* 点缀色 */
  --acc-fg: #0d3d2d;
  --warn: #3e6a9e;
  --title-bg: repeating-linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 4px) 0 50% / 100% 12px no-repeat, var(--paper);
  --title-fg: var(--ink);
  --desk:
    radial-gradient(circle, #e8e5df 0 1px, transparent 1.5px) 0 0 / 37px 41px,
    radial-gradient(circle, #2ca770 0 1px, transparent 1.5px) 13px 19px / 53px 47px,
    #3e6a9e;
  --notice-bg: var(--ink);
  --notice-fg: #7fe0b0;
}
/* 棋局是暗底：底色全部用色卡里的 #49473c，线和字反过来用浅色 */
html[data-theme="crt-chess"] {
  --paper: #49473c;
  --field: #49473c;
  --field2: #49473c;
  --ink: #e5e2be;
  --acc: #5d9f58;
  --acc-fg: #1f1f18;
  --warn: #e870a1;
  --drop: #1f1f18;
  --title-bg: #e870a1;
  --title-fg: #1f1f18;
  --desk: radial-gradient(circle, #efca54 0 1px, transparent 1.5px) 0 0 / 41px 37px, #292c23;
  --notice-bg: #1f1f18;
  --notice-fg: #efca54;
}
html[data-theme^="crt"] {
  --face: var(--paper);
  --light: var(--paper);
  --shadow: color-mix(in srgb, var(--ink) 55%, var(--paper));
  --muted: color-mix(in srgb, var(--ink) 62%, var(--paper));
  --title1: var(--ink);
  --title2: var(--ink);
  --sel-bg: var(--ink);
  --sel-fg: var(--paper);
  --font: 14px "DotGothic16", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
}
html[data-theme^="crt"] body {
  color: var(--ink);
  background-attachment: fixed;
  /* 荧光粉的辉光 */
  text-shadow: 0 0 2px color-mix(in srgb, currentColor 40%, transparent);
}
html[data-theme^="crt"] #win { inset: 16px; }

/* 显像管：扫描线 + 四角暗边 + 圆角黑色外框。盖在最上层，不挡点击 */
html[data-theme^="crt"] body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  border-radius: 26px / 22px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 110% at 50% 50%, transparent 62%, rgba(0, 0, 0, .38) 100%);
  box-shadow: 0 0 0 80px #0b0b09, inset 0 0 30px rgba(0, 0, 0, .35);
}
/* 弹窗在最顶层，扫描线盖不到，单独给它加一层 */
html[data-theme^="crt"] dialog::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px);
}
html[data-theme^="crt"] dialog { color: var(--ink); }
html[data-theme^="crt"] dialog::backdrop {
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px),
    color-mix(in srgb, var(--ink) 45%, transparent);
}

/* 窗口：粗黑线框 + 硬投影，没有圆角和渐变 */
html[data-theme^="crt"] .window {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--drop, color-mix(in srgb, var(--ink) 70%, transparent));
  padding: 3px;
}
html[data-theme^="crt"] .titlebar {
  background: var(--title-bg);
  color: var(--title-fg);
  font-weight: normal;
  letter-spacing: 1px;
  height: 24px;
  margin: -3px -3px 3px;
  padding: 0 6px;
  border-bottom: 2px solid var(--ink);
  text-shadow: none;
}
/* 蓝鸽的标题栏是老 Mac 的横纹，标题文字要垫一块底色 */
html[data-theme="crt-dove"] .titlebar > span:first-child { background: var(--paper); padding: 0 8px; }
/* 关闭框：方块里一个 × */
html[data-theme^="crt"] .titlebar .x {
  width: 18px; height: 18px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: none;
  font: bold 14px/14px monospace;
  text-shadow: none;
}
html[data-theme^="crt"] .titlebar .x:hover { background: var(--ink); color: var(--paper); }

/* 下陷区域、输入框 */
html[data-theme^="crt"] .inset,
html[data-theme^="crt"] input,
html[data-theme^="crt"] textarea,
html[data-theme^="crt"] select {
  background-color: var(--field);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
}
html[data-theme^="crt"] select {
  appearance: none;
  padding-right: 22px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
html[data-theme^="crt"] input:focus,
html[data-theme^="crt"] select:focus,
html[data-theme^="crt"] textarea:focus { outline: 2px dashed var(--acc); outline-offset: 1px; }
html[data-theme^="crt"] ::selection { background: var(--ink); color: var(--paper); }

/* 按钮：直角实线框，按下反色并“压下去” */
html[data-theme^="crt"] button {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 2px 12px;
}
html[data-theme^="crt"] button:hover:not(:disabled) { background: var(--acc); color: var(--acc-fg); }
html[data-theme^="crt"] button:active:not(:disabled) {
  background: var(--ink); color: var(--paper);
  box-shadow: none;
  transform: translate(2px, 2px);
}
html[data-theme^="crt"] button:disabled { color: var(--shadow); border-style: dashed; box-shadow: none; text-shadow: none; }

/* 分组框：标题做成反色小标签 */
html[data-theme^="crt"] fieldset { border: 2px solid var(--ink); box-shadow: none; }
html[data-theme^="crt"] legend { background: var(--ink); color: var(--paper); padding: 0 6px; }

/* 标签页 */
html[data-theme^="crt"] .tab { top: 0; box-shadow: none; }
html[data-theme^="crt"] .tab.sel { background: var(--ink); color: var(--paper); font-weight: normal; padding-bottom: 2px; }

/* 工具栏、状态栏、公告 */
html[data-theme^="crt"] .toolbar .sep { border-left: 2px solid var(--ink); border-right: none; }
html[data-theme^="crt"] .statusbar { box-shadow: none; border-top: 2px solid var(--ink); }
html[data-theme^="crt"] #notice { letter-spacing: 1px; }

/* 菜单 */
html[data-theme^="crt"] .menu { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--drop, color-mix(in srgb, var(--ink) 70%, transparent)); }
html[data-theme^="crt"] .msep { border-top: 2px solid var(--ink); border-bottom: none; }

/* 聊天记录 */
html[data-theme^="crt"] #log.private { background: var(--field2); }
html[data-theme^="crt"] .msg .time,
html[data-theme^="crt"] .msg.sysmsg,
html[data-theme^="crt"] .typing,
html[data-theme^="crt"] .offline-sep,
html[data-theme^="crt"] .msg .text i { color: var(--muted); }
html[data-theme^="crt"] .who { color: var(--ink); }
html[data-theme^="crt"] .sys,
html[data-theme^="crt"] .err,
html[data-theme^="crt"] .brief .memo-warn,
html[data-theme^="crt"] .msg.shake-msg { color: var(--warn); }
html[data-theme^="crt"] .msg .think,
html[data-theme^="crt"] .msg .pdesc,
html[data-theme^="crt"] .post .pdesc,
html[data-theme^="crt"] .cmts {
  background: var(--field2);
  color: var(--ink);
  border: 1px dashed var(--ink);
}
html[data-theme^="crt"] .cmts { border-width: 0 0 0 3px; border-style: solid; }
/* 正在输入的三个点变成像素方块 */
html[data-theme^="crt"] .typing .dots i {
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 3px;
  background: currentColor;
  font-size: 0;
  vertical-align: middle;
}
html[data-theme^="crt"] .pic,
html[data-theme^="crt"] .pics .pp img { border: 2px solid var(--ink); }

/* 链接和各处写死的灰字、蓝字 */
html[data-theme^="crt"] .msg .ops a,
html[data-theme^="crt"] .post .pops a,
html[data-theme^="crt"] #chats li a,
html[data-theme^="crt"] #pl-songs a { color: var(--ink); }
html[data-theme^="crt"] .post .pops a[data-like],
html[data-theme^="crt"] .plikes { color: var(--warn); }
html[data-theme^="crt"] .row .pv,
html[data-theme^="crt"] .row .tm,
html[data-theme^="crt"] .row .sig,
html[data-theme^="crt"] .hint,
html[data-theme^="crt"] .card-fields th,
html[data-theme^="crt"] #card-sig-hist summary,
html[data-theme^="crt"] .sh-time,
html[data-theme^="crt"] .sh-cur,
html[data-theme^="crt"] .space-sig,
html[data-theme^="crt"] .visitors,
html[data-theme^="crt"] .blog .bprev,
html[data-theme^="crt"] .post .ptime { color: var(--muted); }
html[data-theme^="crt"] .profile .pstatus,
html[data-theme^="crt"] #members .pstatus { color: var(--acc); }
html[data-theme="crt-dove"] .profile .pstatus,
html[data-theme="crt-dove"] #members .pstatus { color: #1f8a5a; }
/* 「新」角标：反色小方块 */
html[data-theme^="crt"] .sig-new { background: var(--warn); color: var(--field); border-radius: 0; text-shadow: none; }

/* 首页 */
html[data-theme^="crt"] .room-icon { color: var(--ink); }
html[data-theme^="crt"] .avatar .ph { color: var(--shadow); }
html[data-theme^="crt"] .post { border-bottom-color: var(--shadow); }

/* 空间播放器：屏幕用深底亮字 */
html[data-theme^="crt"] .pl-screen { background: var(--ink); color: var(--notice-fg); border: 2px solid var(--ink); }

/* 滚动条：棋盘格轨道 + 实心滑块 */
html[data-theme^="crt"] ::-webkit-scrollbar { width: 16px; height: 16px; }
html[data-theme^="crt"] ::-webkit-scrollbar-track {
  background: repeating-conic-gradient(var(--acc) 0 25%, var(--field) 0 50%) 0 0 / 4px 4px;
  border-left: 2px solid var(--ink);
}
html[data-theme^="crt"] ::-webkit-scrollbar-thumb { background: var(--paper); border: 2px solid var(--ink); }
html[data-theme^="crt"] ::-webkit-scrollbar-corner { background: var(--paper); }

/* ---- 棋局专属：放在最后，压过上面的通用规则 ---- */
/* 按钮：黄色，悬停变粉，字一律黑色 */
html[data-theme="crt-chess"] button { background: #efca54; color: #1f1f18; border-color: #1f1f18; box-shadow: 2px 2px 0 #1f1f18; text-shadow: none; }
html[data-theme="crt-chess"] button:hover:not(:disabled),
html[data-theme="crt-chess"] .tab.sel { background: #e870a1; color: #1f1f18; }
html[data-theme="crt-chess"] button:active:not(:disabled) { background: #1f1f18; color: #efca54; }
html[data-theme="crt-chess"] button:disabled { background: transparent; color: var(--shadow); border-color: var(--shadow); }
html[data-theme="crt-chess"] .titlebar .x { background: #efca54; color: #1f1f18; border-color: #1f1f18; }
/* 滚动条：绿色轨道，浅色滑块（和聊天窗口同色） */
html[data-theme="crt-chess"] ::-webkit-scrollbar-track { background: #3f6e3c; border-left-color: #1f1f18; }
html[data-theme="crt-chess"] ::-webkit-scrollbar-thumb { background: #e8e0b6; border-color: #1f1f18; }
/* 角色自己设的名字颜色大多是深色，在暗底上看不清：反相再转回色相，颜色不变、变亮 */
html[data-theme="crt-chess"] [style*="color"]:not(.text) { filter: invert(1) hue-rotate(180deg); }
html[data-theme="crt-chess"] [style*="color"]:not(.text) > * { filter: invert(1) hue-rotate(180deg); }

/* 聊天窗口、空间、首页好友列表用浅色底，其他弹窗保持暗底。
   派生变量在 html 上就算好了，这里要跟着重写一遍 */
html[data-theme="crt-chess"] :is(#win, #dlg-space, #lobby .groups) {
  --paper: #e8e0b6;
  --field: #f3ecca;
  --field2: #efe2a8;
  --ink: #26261c;
  --acc-fg: #f3ecca;
  --warn: #c2457c;
  --drop: color-mix(in srgb, #26261c 70%, transparent);
  --face: var(--paper);
  --light: var(--paper);
  --shadow: color-mix(in srgb, var(--ink) 55%, var(--paper));
  --muted: color-mix(in srgb, var(--ink) 62%, var(--paper));
  --title1: var(--ink);
  --title2: var(--ink);
  --sel-bg: var(--ink);
  --sel-fg: var(--paper);
  color: var(--ink);
}
html[data-theme="crt-chess"] :is(#win, #dlg-space, #lobby .groups) [style*="color"],
html[data-theme="crt-chess"] :is(#win, #dlg-space, #lobby .groups) [style*="color"] > * { filter: none; }
/* 首页左边头像那一栏：绿色底 */
html[data-theme="crt-chess"] #lobby { --paper: #5d9f58; }
html[data-theme="crt-chess"] #lobby-name { color: #1f1f18 !important; filter: none; }