/* ============================================================
 * 《回声校园》样式
 * 调查板：暗色软木板侦探风；各站点独立年代皮肤；全站无外部资源
 * ============================================================ */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  line-height: 1.85;
  color: #2b2b2b;
  background: #f5f2ea;
}
h1, h2, h3 { font-weight: 600; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.wrap { max-width: 880px; margin: 0 auto; padding: 24px 20px 80px; }

/* ---------- 收藏夹书签栏 ---------- */
.fav-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 12px; margin-bottom: 28px;
  background: #3a3128; border-radius: 0 0 8px 8px;
  font-size: 13px;
}
.fav-title { color: #b8a888; margin-right: 6px; letter-spacing: 2px; }
.fav-link {
  color: #e6dcc4; text-decoration: none; padding: 2px 10px;
  border: 1px solid #6b5c44; border-radius: 4px; background: #4a4033;
}
.fav-link:hover { background: #5c5140; }
.fav-link.current { background: #8a6d3b; border-color: #a98c52; color: #fff; }
.fav-board { border-style: dashed; }

/* ---------- 调查板（软木板） ---------- */
body.board-page {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.03), transparent 40%),
    repeating-linear-gradient(45deg, #4a3b2a 0 3px, #463829 3px 6px);
  background-color: #463829;
  color: #efe6d2;
}
.board-head { text-align: center; padding: 20px 0 6px; }
.board-head h1 { color: #f0e2c4; letter-spacing: 8px; margin: 0 0 4px; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.board-head p { color: #b8a888; margin: 0; font-size: 13px; letter-spacing: 2px; }

.board { max-width: 1280px; margin: 0 auto; padding: 10px 20px 60px; }
.zone { margin-top: 34px; }
.zone > h2 {
  color: #e8d3a8; letter-spacing: 6px; font-size: 18px;
  border-bottom: 1px solid #8a6d3b; padding-bottom: 6px;
}
.zone > h2 small { color: #a8946f; font-size: 12px; letter-spacing: 1px; margin-left: 10px; }

#zone-people {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px;
}
.person-card {
  position: relative;
  background: #e9dfc8;
  color: #33302a;
  border-radius: 3px;
  padding: 14px 14px 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
  border-top: 3px solid #b03a2e;
}
.person-card::before { /* 图钉 */
  content: ''; position: absolute; top: -8px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e74c3c, #7b1f16);
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.person-title {
  font-weight: 700; font-size: 16px; letter-spacing: 2px;
  border-bottom: 1px dashed #a8946f; padding-bottom: 6px; margin-bottom: 8px;
  color: #5a2c22;
}

#zone-timeline { position: relative; padding-left: 26px; }
#zone-timeline::before {
  content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: #b03a2e;
}
.tl-item { position: relative; margin-bottom: 14px; }
.tl-item::before {
  content: ''; position: absolute; left: -24px; top: 22px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #b03a2e; border: 2px solid #e9dfc8;
}
.tl-item .slot { max-width: 560px; }

#zone-truth, #zone-side {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}

/* 槽位 */
.slot {
  background: #f2ead6;
  border: 1px solid #c9b98f;
  border-radius: 3px;
  padding: 8px 10px; margin: 8px 0;
}
.slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.slot-label { font-size: 14px; font-weight: 600; color: #4a3f2c; }
.slot-sub { font-size: 11px; color: #9a8a66; }
.slot-form { display: flex; gap: 6px; margin-top: 6px; }
.slot-form input {
  flex: 1; min-width: 0; padding: 4px 8px; font-size: 14px;
  border: 1px solid #b3a276; border-radius: 3px; background: #fffdf6; color: #333;
}
.slot-form input:focus { outline: 2px solid #b03a2e55; }
.btn-pin {
  background: #7b5e36; color: #f5ecd8; border: none; border-radius: 3px;
  padding: 4px 12px; font-size: 13px;
}
.btn-pin:hover { background: #8f6f42; }
.btn-hint {
  background: transparent; color: #7b6a4a; border: 1px solid #b3a276;
  border-radius: 3px; padding: 4px 10px; font-size: 13px;
}
.btn-hint:hover { background: #e4d8ba; }
.slot-msg { font-size: 12px; color: #8a5a2a; margin-top: 4px; min-height: 0; }
.slot-msg .ache { color: #4a6a8a; font-style: italic; }
.hint-tag {
  display: inline-block; background: #8a6d3b; color: #fff; font-size: 10px;
  border-radius: 3px; padding: 0 5px; margin-right: 4px; vertical-align: 1px;
}
.slot.solved { background: #dcead2; border-color: #7fa06a; }
.slot-answer { font-size: 15px; font-weight: 700; color: #2e5a26; padding: 4px 0 2px; }
.slot-answer .pin {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #b03a2e; margin-right: 8px; vertical-align: 2px;
}
.slot.spoiled { background: #e8e2d2; border-style: dashed; }
.slot.spoiled .slot-answer { color: #6a5a3a; }
.spoiled-tag {
  font-size: 10px; font-weight: 400; color: #9a8a66; border: 1px solid #b3a276;
  border-radius: 3px; padding: 0 4px; margin-left: 8px; vertical-align: 2px;
}

.shake { animation: ce-shake .4s; }
@keyframes ce-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); } 75% { transform: translateX(5px); }
}

/* 提交区 */
.submit-area { text-align: center; margin: 46px 0 20px; }
#ce-progress { color: #e8d3a8; font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
#ce-progress b { color: #fff; }
#ce-submit {
  background: #b03a2e; color: #fff; border: none; border-radius: 4px;
  font-size: 18px; letter-spacing: 6px; padding: 12px 42px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
#ce-submit:hover { background: #c44536; }

/* 解锁提示 toast */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(80px);
  background: #2c2419; color: #f0e2c4; border: 1px solid #8a6d3b;
  padding: 10px 22px; border-radius: 6px; font-size: 14px;
  opacity: 0; transition: all .35s; pointer-events: none; z-index: 99;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 入口页 ---------- */
body.index-page { background: #efe9db; }
.index-hero { text-align: center; padding: 30px 0 10px; }
.index-hero h1 { letter-spacing: 10px; color: #3a3128; margin-bottom: 4px; }
.index-hero p { color: #8a7a5c; font-size: 13px; letter-spacing: 3px; }
.btn-board {
  display: inline-block; margin-top: 26px; background: #7b5e36; color: #f5ecd8;
  text-decoration: none; padding: 12px 40px; border-radius: 4px;
  font-size: 17px; letter-spacing: 4px;
}
.btn-board:hover { background: #8f6f42; }
.center { text-align: center; }

/* ---------- 材料通用 ---------- */
.material {
  background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.12);
  border-radius: 4px; padding: 18px 22px; margin-bottom: 26px;
}
.material-head { border-bottom: 1px solid rgba(0,0,0,.12); padding-bottom: 8px; margin-bottom: 12px; }
.material-head h2 { display: inline; font-size: 18px; margin: 0 10px 0 0; }
.material-id {
  font-size: 11px; color: #fff; background: #8a7a5c; border-radius: 3px;
  padding: 1px 6px; margin-right: 8px; vertical-align: 2px; letter-spacing: 1px;
}
.material-meta { font-size: 12px; color: #9a8a66; }
.material.locked { opacity: .75; }
.placeholder {
  color: #9a8a66; font-style: italic; padding: 14px;
  border: 1px dashed #b3a276; border-radius: 4px; text-align: center;
}
.placeholder.small { padding: 6px; font-size: 13px; margin-top: 10px; }

.m-file { color: #8a7a5c; font-size: 13px; }
.m-sig { text-align: right; }
.m-foot { color: #9a8a66; font-size: 13px; }
.m-code {
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
  background: rgba(0,0,0,.07); padding: 2px 6px; border-radius: 3px;
  word-break: break-all;
}
.m-table { border-collapse: collapse; margin: 8px 0; }
.m-table td { border: 1px solid rgba(0,0,0,.18); padding: 3px 14px; font-size: 14px; }
.m-user { font-weight: 600; }
.m-date { color: #9a8a66; font-size: 13px; }
.m-time { font-family: Menlo, Consolas, monospace; font-size: 13px; color: #8a7a5c; }
.m-poem p { margin: 2px 0; }
.m-poem b { color: #a03a2e; }
.m-deleted { color: #a03a2e; text-decoration: line-through; }
.m-margin { font-size: 13px; color: #8a7a5c; }
.m-faint { color: #b0a184; font-style: italic; }
.m-hand { font-style: italic; }
.m-note2 { font-size: 14px; color: #6a5a3a; }
.m-note3 { font-size: 13px; color: #8a7a5c; }
.m-photo svg, .m-negative svg { width: 100%; height: auto; border-radius: 3px; }
.m-photo figcaption, .m-negative figcaption { font-size: 13px; color: #8a7a5c; margin-top: 6px; }
.m-photo { max-width: 460px; margin: 10px auto; padding: 10px; background: #fffdf4; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.m-negatives { display: flex; flex-wrap: wrap; gap: 18px; }
.m-negative { flex: 1 1 240px; margin: 0; }
.m-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .m-compare { grid-template-columns: 1fr; } }
.m-doc { border: 1px solid rgba(0,0,0,.14); border-radius: 3px; padding: 10px 14px; background: rgba(255,255,255,.4); }
.m-receipt {
  display: inline-block; background: #fffef8; border: 1px solid #d8ccae;
  padding: 10px 26px; font-family: Menlo, Consolas, monospace; font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.m-receipt p { margin: 2px 0; }
.m-letter { font-size: 17px; }
.m-torn { color: #8a5a2a; }
.m-guestbook p { margin: 6px 0; }
.m-extra { border-top: 1px dashed #b3a276; padding-top: 8px; margin-top: 8px; }

/* 密码门 */
.gate-box {
  max-width: 420px; margin: 60px auto; text-align: center;
  background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px; padding: 34px 26px;
}
.gate-icon { font-size: 34px; color: #8a7a5c; }
.gate-form { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.gate-form input {
  padding: 8px 12px; font-size: 16px; letter-spacing: 3px; width: 200px;
  border: 1px solid #b3a276; border-radius: 4px; text-align: center;
}
.gate-form button {
  background: #7b5e36; color: #f5ecd8; border: none; border-radius: 4px; padding: 8px 18px;
}
.gate-msg { color: #a03a2e; font-size: 13px; min-height: 20px; }

/* ============================================================
 * 站点年代皮肤
 * ============================================================ */
.site-head h1 { margin-bottom: 0; letter-spacing: 3px; }
.site-era { color: #9a8a66; font-size: 13px; margin-top: 2px; }

/* 博客：素雅 2010s */
body.skin-blog { background: #f7f5f0; }
body.skin-blog .site-head h1 { font-family: "Songti SC", serif; color: #4a4a4a; }
body.skin-blog .material { background: #fff; border: none; border-bottom: 1px solid #e4e0d6; border-radius: 0; }

/* 频道：深色视频站 */
body.skin-channel { background: #1c1e22; color: #d8d8d8; }
body.skin-channel .material { background: #26292e; border-color: #3a3e44; }
body.skin-channel .site-head h1 { color: #f0f0f0; }
body.skin-channel .m-code { background: rgba(255,255,255,.1); }

/* 校友录：朴素 */
body.skin-alumni { background: #eef2ee; }
body.skin-alumni .material { background: #fdfdfa; border-color: #c8d2c8; }
body.skin-alumni .site-head h1 { color: #3a5a3a; }

/* 论坛：老 BBS 蓝白 */
body.skin-forum { background: #f0f4fa; font-family: "SimSun", "Songti SC", serif; }
body.skin-forum .site-head h1 { color: #1a3a7a; }
body.skin-forum .material { background: #fff; border: 1px solid #9ab; border-radius: 0; }
body.skin-forum .material-head { background: #e0e8f4; margin: -18px -22px 12px; padding: 8px 22px; }
body.skin-forum .m-thread p { border-bottom: 1px solid #e4eaf4; padding-bottom: 4px; }

/* 校报：报纸质感 */
body.skin-paper { background: #e8e2d0; }
body.skin-paper .material {
  background: #f4efdd; border: 1px solid #c4b98f;
  box-shadow: inset 0 0 40px rgba(150,130,80,.12);
}
body.skin-paper .site-head h1 { font-family: "Songti SC", serif; color: #4a3a1a; letter-spacing: 6px; }

/* 新闻：素净 */
body.skin-news { background: #fafafa; }
body.skin-news .material { background: #fff; border-left: 3px solid #a03a2e; border-radius: 0; }
body.skin-news .site-head h1 { color: #a03a2e; }

/* 档案：牛皮纸 */
body.skin-records { background: #d9c9a3; }
body.skin-records .material {
  background: #efe4c4; border: 1px solid #b09c6a;
  box-shadow: 2px 3px 8px rgba(90,70,30,.25);
}
body.skin-records .site-head h1 { color: #5a4420; }

/* 网盘：现代 */
body.skin-netdisk { background: #f2f5f8; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
body.skin-netdisk .material { background: #fff; border: 1px solid #dde4ea; border-radius: 8px; }
body.skin-netdisk .site-head h1 { color: #2a4a6a; }

/* 贴吧：2010s */
body.skin-tieba { background: #eef3f8; font-family: "SimSun", "Songti SC", serif; }
body.skin-tieba .site-head h1 { color: #2a5aa0; }
body.skin-tieba .material { background: #fff; border: 1px solid #b8cce0; }
body.skin-tieba .material-head { background: #dfeaf6; margin: -18px -22px 12px; padding: 8px 22px; }

/* 遗物页：信件质感 */
body.skin-letter { background: #ece2cc; }
body.skin-letter .material {
  background: #f8f0dc; border: none; padding: 34px 40px;
  box-shadow: 0 4px 14px rgba(90,70,30,.28);
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(140,110,60,.14) 33px 34px);
}
body.skin-letter .site-head h1 { color: #5a4420; letter-spacing: 6px; }

/* ---------- 结局页 ---------- */
body.ending-page { background: #191510; color: #e8dcc0; }
body.ending-page .wrap { max-width: 760px; }
body.ending-page h1 { letter-spacing: 8px; color: #f0e2c4; text-align: center; }
.ending-cond { text-align: center; color: #8a7a5c; font-size: 13px; letter-spacing: 2px; }
.ending-body { margin: 30px 0; }
.ending-body .m-mail { border: 1px solid #4a4033; padding: 14px 18px; border-radius: 4px; margin: 16px 0; }
.ending-body .m-mail-head { font-size: 13px; color: #9a8a66; border-bottom: 1px solid #4a4033; padding-bottom: 6px; margin-bottom: 8px; }
.e-cards { border-left: 2px solid #8a6d3b; padding-left: 18px; margin: 20px 0; }
.e-cards p { margin: 8px 0; }
.e-last { font-size: 19px; text-align: center; letter-spacing: 3px; color: #f0e2c4; margin-top: 30px; }
.e-false { border: 1px dashed #7a4a3a; padding: 10px 18px; color: #c8a898; }
.e-glitch { color: #8a7a5c; animation: ce-flicker 1.6s infinite; }
@keyframes ce-flicker { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.e-voice { font-size: 18px; color: #f0e2c4; border-left: 3px solid #b03a2e; padding-left: 16px; }
.ending-stats {
  text-align: center; font-size: 14px; color: #b8a888;
  border-top: 1px solid #3a3128; margin-top: 36px; padding-top: 18px;
}
.ending-actions { text-align: center; margin-top: 26px; }
.ending-actions a, .ending-actions button {
  display: inline-block; margin: 0 8px; padding: 10px 26px; border-radius: 4px;
  font-size: 15px; letter-spacing: 3px; text-decoration: none;
}
.btn-main { background: #b03a2e; color: #fff; border: none; }
.btn-sub { background: transparent; color: #9a8a66; border: 1px solid #5a4c3a; font-size: 13px; }

/* 可选 CRT 细扫描线 */
.crt::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.05) 2px 3px);
}