/* ============================================
   远方 — 网页解密推理游戏
   视觉基调：2005 年国企对外新闻网站
   全宋体，直角扁平，无现代特效
   ============================================ */

/* === 全局重置 === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: "宋体", SimSun, "仿宋", FangSong, serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  background: #e8e6e1;
}

a {
  color: #0000cc;
  text-decoration: underline;
}
a:visited {
  color: #551a8b;
}
a:hover {
  color: #cc0000;
}

/* === Wiki 内容区容器 === */
.wiki-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px 40px;
  min-height: 100vh;
  transition: transform 0.3s ease;
}

/* 侧边栏在右侧展开时 Wiki 左移 */
body.sb-right-visible .wiki-wrapper {
  transform: translateX(-200px);
}
/* 侧边栏在左侧展开时 Wiki 右移 */
body.sb-left-visible .wiki-wrapper {
  transform: translateX(200px);
}

/* === Wiki 主内容区 === */
#wiki-content {
  background: #f5f0e8;
  border: 1px solid #c5bfb0;
  padding: 0;
}

/* 顶栏 */
.wiki-header {
  background: #003366;
  color: #fff;
  padding: 12px 20px 8px;
  text-align: center;
}
.wiki-header h1 {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0;
}
.wiki-subtitle {
  font-size: 12px;
  color: #ccc;
  margin-top: 2px;
}

/* 导航栏 */
.wiki-nav {
  background: #ccc;
  padding: 5px 15px;
  font-size: 14px;
  border-bottom: 1px solid #b0b0b0;
}
.wiki-nav a {
  color: #003366;
  margin: 0 4px;
}

/* 正文区 */
.wiki-body {
  padding: 24px 30px 36px;
}
.wiki-body h2 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 18px;
  font-weight: bold;
}
.wiki-body p {
  text-indent: 2em;
  margin-bottom: 12px;
  text-align: justify;
}
.wiki-body b {
  font-weight: bold;
}
.wiki-body hr {
  border: 0;
  border-top: 1px solid #c5bfb0;
  margin: 14px 0;
}
.wiki-body s {
  color: #999;
}
.wiki-body ol, .wiki-body ul {
  margin-left: 2em;
  margin-bottom: 12px;
}
.wiki-body ol li, .wiki-body ul li {
  margin-bottom: 4px;
}
.wiki-body h3 {
  font-size: 15px;
  margin-top: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}
/* 关键词 — 纯加粗，外观与干扰词完全一致 */
.wiki-body .keyword-hint {
  font-weight: bold;
}

/* 面包屑导航 */
.wiki-breadcrumb {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ddd;
}

/* 文章元数据行 */
.wiki-meta {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin-bottom: 18px;
}

/* 档案编号 */
.wiki-archive-no {
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid #ddd;
}

/* 内部文件标识 */
.internal-header {
  background: #8b0000;
  color: #fff;
  text-align: center;
  padding: 6px 0;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

/* 附表容器 */
.attach-box {
  margin-top: 20px;
  border: 1px solid #999;
  padding: 14px 16px;
  background: #fafaf5;
}
.attach-box .attach-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
}
.attach-box table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.attach-box table th,
.attach-box table td {
  border: 1px solid #999;
  padding: 4px 6px;
  text-align: center;
}
.attach-box table th {
  background: #e8e8e8;
}

/* 页脚 */
.wiki-footer {
  border-top: 1px solid #c5bfb0;
  padding: 10px 25px 14px;
  font-size: 13px;
  color: #666;
  text-align: center;
}
.wiki-footer p {
  margin-bottom: 2px;
}

/* === 侧边栏 === */
#sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 475px;
  height: 100vh;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
#sidebar.visible {
  transform: translateX(0);
}

/* 左侧停靠 */
#sidebar.sidebar-left {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}
#sidebar.sidebar-left.visible {
  transform: translateX(0);
}

/* === 拉手（独立元素） === */
#sidebar-tab {
  position: fixed;
  right: 0;
  top: 160px;
  width: 24px;
  height: 100px;
  background: rgba(255, 243, 0, 0.6);
  cursor: pointer;
  transition: background 0.15s, right 0.3s ease, left 0.3s ease;
  z-index: 101;
  border-left: 1px solid rgba(200, 190, 50, 0.5);
}
/* 右侧展开：拉手跟随侧边栏移到内边缘 */
body.sb-right-visible #sidebar-tab {
  right: 475px;
}
/* 左侧模式 */
#sidebar-tab.tab-left {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid rgba(200, 190, 50, 0.5);
}
/* 左侧展开：拉手跟随侧边栏移到内边缘 */
body.sb-left-visible #sidebar-tab {
  left: 475px;
}
#sidebar-tab:hover {
  background: rgba(255, 248, 80, 0.75);
}

/* === 侧边栏面板 === */
#sidebar-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f5f0e8;
  border-left: 1px solid #c5bfb0;
  display: flex;
  flex-direction: column;
}
#sidebar.sidebar-left #sidebar-panel {
  border-left: none;
  border-right: 1px solid #c5bfb0;
}

/* === 工具栏 === */
#sidebar-toolbar {
  height: 34px;
  border-bottom: 1px solid #c5bfb0;
  display: flex;
  align-items: center;
  padding: 0 6px;
  background: #ede8db;
}
.toolbar-btn {
  border: 1px solid #999;
  background: #ddd;
  color: #333;
  font-size: 12px;
  width: 26px;
  height: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  font-family: "宋体", SimSun, serif;
  margin-right: 2px;
}
.toolbar-btn:hover {
  background: #ccc;
}
.toolbar-btn:active {
  background: #bbb;
}
#btn-reset {
  color: #666;
}

/* === 推理白板 === */
#whiteboard {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

#connection-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* === Token 纸片标签 === */
.token {
  position: absolute;
  padding: 6px 10px;
  font-size: 15px;
  font-family: "宋体", SimSun, serif;
  background: #fffef8;
  border: 1px solid #c5bfb0;
  z-index: 2;
  white-space: nowrap;
  user-select: none;
  cursor: default;
}
.token.key-token {
  /* 不透明，完整可见 */
}
.token.non-key-token {
  opacity: 0.45;
}

/* 连线模式 — 源 token 暗红脉冲 */
.token.conn-source {
  box-shadow: 0 0 0 2px #8b0000;
  animation: pulse-conn 0.8s ease-in-out infinite alternate;
}
@keyframes pulse-conn {
  from { box-shadow: 0 0 0 1px rgba(139, 0, 0, 0.6); }
  to   { box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.6); }
}

/* 有效连线关联的 token — 静态暗红边框 */
.token.token-valid-conn {
  box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.65);
}

/* === 连线 SVG 样式 === */
.conn-hitarea {
  stroke: transparent;
  stroke-width: 20;
  pointer-events: stroke;
  cursor: pointer;
}
.conn-visible {
  pointer-events: none;
}

/* 有效连线 */
.conn-valid .conn-visible {
  stroke: #8b0000;
  stroke-width: 2.5;
}
/* 无效连线 */
.conn-invalid .conn-visible {
  stroke: #ccc;
  stroke-width: 2;
}

/* 系统连线（绿色虚线，引擎自动生成） */
.conn-system .conn-visible {
  stroke: #556b2f;
  stroke-width: 2;
  stroke-dasharray: 6, 4;
}

/* 长按准备删除 */
.conn-deleting .conn-visible {
  stroke: #b5735a;
  stroke-width: 3;
}

/* === 隐藏内容相关 === */
/* 待解锁的隐藏链接 — 灰色不可点 */
a.hidden-link {
  color: #999;
  cursor: default;
  text-decoration: none;
}
a.hidden-link.unlocked {
  color: #0000cc;
  cursor: pointer;
  text-decoration: underline;
}

/* 隐藏段落注入时的动画 */
.hidden-paragraph {
  animation: fadeIn 0.6s ease-out;
  border-left: 2px solid #8b0000;
  padding-left: 12px;
  margin: 16px 0;
}
.hidden-paragraph .patch-date {
  font-size: 12px;
  color: #999;
  margin-bottom: 6px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === 404 页面 === */
.error-404 {
  padding: 40px 0;
  text-align: center;
}
.error-404-code {
  font-size: 72px;
  color: #c5bfb0;
  font-weight: bold;
  letter-spacing: 8px;
  margin-bottom: 8px;
}
.error-404-msg {
  font-size: 15px;
  color: #999;
  margin-bottom: 24px;
}
.error-404-title {
  font-size: 13px;
  color: #888;
  margin-bottom: 20px;
}
.error-404-residual {
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
  padding: 16px 20px;
  background: #f9f7f0;
  border: 1px dashed #c5bfb0;
  font-size: 13px;
  color: #555;
  line-height: 1.9;
}
.error-404-residual p {
  margin: 4px 0;
}

/* === 批注稿件 === */
.annotated-draft {
  padding: 10px 0;
  line-height: 2;
}
.annotated-draft .editor-note {
  color: #cc0000;
  font-size: 13px;
  margin: 0 2px;
  font-weight: bold;
}
.annotated-draft .editor-cut {
  text-decoration: line-through;
  color: #999;
}
.annotated-draft .editor-comment {
  color: #cc0000;
  font-size: 12px;
  background: #fff5f5;
  padding: 2px 6px;
  margin-left: 4px;
}