:root {
  --bg: #0f0d10;
  --surface: #161219;
  --surface2: #1a151a;
  --surface3: #211a20;
  --ink: #eee7e8;
  --ink-soft: #cfc3c6;
  --muted: #8f838c;
  --line: #2c252b;
  --accent: #e2493c;
  --accent-glow: rgba(226, 73, 60, 0.35);
  --amber: #d7a544;
  --green: #5fa87a;
  --promo-tint: #211c2c;
  --ext-link: #6ab0ff;
  --ext-link-hover: #8ec4ff;
}

:root[data-theme="light"] {
  --bg: #eef0f2;
  --surface: #ffffff;
  --surface2: #f6f6f8;
  --surface3: #ececf0;
  --ink: #232323;
  --ink-soft: #4a4a4a;
  --muted: #86828a;
  --line: #dcdce0;
  --accent: #c8392e;
  --accent-glow: rgba(200, 57, 46, 0.18);
  --amber: #9c6f1e;
  --green: #2f7a52;
  --promo-tint: #e4dcf2;
  --ext-link: #0b5fc7;
  --ext-link-hover: #2f7ad8;
}

:root[data-theme="light"] .top {
  background: linear-gradient(180deg, #ffffff, var(--bg));
}

:root[data-theme="light"] .brand strong {
  color: #1c1c1c;
}

.theme-toggle {
  margin-left: 10px;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}

.theme-toggle:hover {
  color: var(--amber);
  border-color: var(--amber);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
}

/* 滚动条：默认那条跟站里的配色不搭，改成用站内 token 画，深浅两套主题自动跟着变。
   thumb 用 2px 透明边 + background-clip 做出内缩效果，不顶满槽宽。 */
html,
.pm-list,
.pm-thread,
.nav,
.photo-row {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

.ext-link {
  color: var(--ext-link);
  text-decoration: underline;
  word-break: break-all;
}

.ext-link:hover {
  color: var(--ext-link-hover);
}

.mono {
  font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.clue {
  color: inherit;
  font-weight: 800;
}

.inner,
main {
  width: min(1080px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* ---------- utility strip ---------- */

.util {
  background: #0b0a0c;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}

.util .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  flex-wrap: wrap;
  gap: 6px;
}

.util .links a {
  margin-left: 12px;
}

.util .links a:hover {
  color: var(--amber);
}

/* ---------- header ---------- */

.top {
  background: linear-gradient(180deg, #171217, var(--bg));
  border-bottom: 1px solid var(--line);
}

.top .inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0 14px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-badge {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: #f6f1e6;
  border: 1px solid #6b5a3a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand strong {
  display: block;
  font-family: "Noto Serif SC", "Noto Sans SC", serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: #fff;
}

.brand em {
  display: block;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-top: 3px;
}

.search {
  display: flex;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}

.search input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--ink);
  padding: 9px 12px;
  font-size: 12.5px;
}

.search input::placeholder {
  color: var(--muted);
}

.search button {
  border: 1px solid var(--line);
  border-left: 0;
  background: var(--surface3);
  color: var(--ink-soft);
  padding: 0 14px;
  cursor: pointer;
}

.user {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.user a {
  color: var(--amber);
  font-weight: 600;
  cursor: pointer;
}

.user a:hover {
  color: var(--accent);
}

.user-pm {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.user-pm:hover {
  background: var(--accent);
  filter: brightness(1.1);
  color: #fff !important;
}

.user-pm svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.user .sep {
  color: var(--line);
}

.user span:not(.sep) {
  color: var(--ink-soft);
  font-weight: 600;
}

.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 8, 0.7);
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
}

.auth-modal[hidden] {
  display: none !important;
}

.auth-box {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 22px 20px;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.auth-box h3 {
  margin: 0 0 16px;
  font-family: "Noto Serif SC", "Noto Sans SC", serif;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.auth-box p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* 投凶提示框里加粗那半句。正文是 --ink-soft（偏灰），光加粗在深色底上
   拉不开差距，得连颜色一起提到 --ink 才真的像重点。 */
.auth-box p strong {
  color: var(--ink);
  font-weight: 600;
}

.auth-field {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 12px;
}

.auth-field input {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: var(--surface3);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 9px 10px;
  font-size: 13px;
  border-radius: 4px;
  font-family: inherit;
}

.auth-field input::placeholder {
  color: var(--muted);
}

.auth-error,
.auth-result {
  font-size: 12.5px;
  margin: 0 0 12px;
  line-height: 1.5;
}

.auth-error {
  color: var(--accent);
}

.auth-result-err {
  color: var(--accent);
}

.auth-result-ok {
  color: var(--amber);
  font-weight: 600;
}

.auth-btns {
  display: flex;
  gap: 10px;
}

.auth-btns button {
  flex: 1;
  border: 0;
  border-radius: 4px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.auth-ok {
  background: var(--accent);
  color: #fff;
}

.auth-links {
  margin-top: 14px;
  text-align: center;
}

.auth-links a {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.auth-links a:hover {
  color: var(--amber);
}

.auth-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.auth-close:hover {
  color: var(--ink);
}

.auth-welcome-msg {
  color: var(--ink);
}

/* 登录成功那句话里的「精华帖」。用的是站内「精华」标签、以及首页那一行
   左边框的同一个琥珀色——弹窗点掉之后玩家还得自己去找那篇帖子，这三处
   同色是他手上唯一的线，所以别改成别的颜色。em 的斜体要去掉，站内正文
   没有斜体。 */
.auth-essence-hl {
  color: var(--amber);
  font-style: normal;
  font-weight: 600;
}

.pm-gate {
  background: var(--surface2);
  border: 1px solid var(--line);
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}

/* 聊天记录锁在这个框里滚，不让它把整页撑长（跨七年的那条有 60 条消息） */
.pm-box {
  display: grid;
  /* minmax(0,…) 而不是 1fr：1fr 的最小尺寸是 auto，会被会话预览那行
     nowrap 的长文本顶开，栏子撑得比框还宽（手机上单栏时尤其明显，
     列表整个溢出到框外面去）。 */
  grid-template-columns: 220px minmax(0, 1fr);
  background: var(--surface2);
  border: 1px solid var(--line);
  height: min(72vh, 620px);
  min-height: 360px;
  overflow: hidden;
}

.pm-box[hidden],
.pm-gate[hidden] {
  display: none;
}

.pm-list {
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.pm-group-label {
  padding: 10px 14px 4px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.pm-conv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  cursor: pointer;
}

.pm-conv.is-active {
  background: var(--surface3);
}

.pm-conv .av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.pm-conv > div {
  flex: 1;
  min-width: 0;
}

.pm-conv strong {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-conv p {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-conv .pm-time {
  align-self: flex-start;
  font-size: 11px;
  color: var(--muted);
  flex: none;
}

.pm-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 「‹ 全部会话」。只有手机上那套两屏切换用得到它，宽屏两栏并排，
   会话列表一直在左边看得见，退回去这个动作根本不存在。 */
.pm-back {
  display: none;
  align-items: center;
  gap: 6px;
  flex: none;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface3);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

/* 只有当前这条会话可见，它占满剩下的高度并自己滚；回复框固定在底部 */
.pm-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px;
}

.pm-thread h2 {
  position: sticky;
  top: -18px;
  z-index: 1;
  background: var(--surface2);
  margin: -18px -22px 0;
  padding: 18px 22px 12px;
}

/* 加密态 */
.pm-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  text-align: center;
}

.pm-lock-title {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.pm-lock-sub {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.pm-lock-form {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.pm-lock-form input {
  width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--surface3);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  border-radius: 2px;
}

.pm-lock-form button {
  padding: 0 16px;
  border: 1px solid var(--line);
  background: var(--surface3);
  color: var(--ink-soft);
  font-size: 13px;
  border-radius: 2px;
  cursor: pointer;
}

.pm-lock-form button:hover {
  color: var(--ink);
}

.pm-quiz-progress {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.pm-quiz-form[hidden] {
  display: none;
}

.pm-quiz-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  width: 100%;
  max-width: 320px;
  text-align: left;
}

.pm-quiz-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.pm-quiz-form input {
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--surface3);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  border-radius: 2px;
}

.pm-quiz-form button {
  margin-top: 4px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: var(--surface3);
  color: var(--ink-soft);
  font-size: 13px;
  border-radius: 2px;
  cursor: pointer;
}

.pm-quiz-form button:hover {
  color: var(--ink);
}

.pm-lock-err {
  margin: 0;
  font-size: 12px;
  color: var(--accent);
}

.pm-conv.is-locked .pm-time {
  font-size: 12px;
}

/* 日期分隔线：这条会话可能跨好几年，让读者一眼看出这段发生在什么时候 */
.pm-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
}

.pm-day:first-of-type {
  margin-top: 4px;
}

.pm-day::before,
.pm-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.pm-day span {
  flex: none;
  font-size: 11.5px;
  color: var(--muted);
}

.pm-reply {
  display: flex;
  gap: 10px;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  margin-top: auto;
  animation: pm-panel-rise 0.4s ease-out;
}

.pm-reply textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  border-radius: 2px;
}

.pm-reply textarea::placeholder {
  color: var(--muted);
}

.pm-reply button {
  flex: none;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: var(--surface3);
  color: var(--ink-soft);
  font-size: 12.5px;
  border-radius: 2px;
}

.pm-reply textarea:disabled,
.pm-reply button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.pm-thread h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.pm-thread h2 .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* 气泡裹住内容，不撑满整行（微信那样）；78% 只是上限，长句才会顶到 */
.pm-msg {
  max-width: 78%;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pm-msg p {
  margin: 0;
  background: var(--surface3);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.6;
}

.pm-msg-time {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.pm-msg.from-me {
  margin-left: auto;
  align-items: flex-end;
}

.pm-msg .pm-img {
  display: block;
  width: 180px;
  max-width: 100%;
  border-radius: 4px;
  cursor: pointer;
}

.pm-msg.from-me .pm-img {
  margin-left: auto;
}

.pm-msg.from-me p {
  background: var(--accent);
  color: #fff;
}

.pm-msg.from-me .pm-msg-time {
  text-align: right;
}

.pm-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
}

.pm-attach-icon {
  font-size: 20px;
}

.pm-attach strong {
  display: block;
  font-size: 13px;
}

.pm-attach small {
  color: var(--muted);
  font-size: 11px;
}

.nav {
  display: flex;
  gap: 2px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}

.nav a {
  padding: 11px 16px;
  font-size: 12.5px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--ink);
}

.nav a.on {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* 「精华」入口的未读记号，由 index.html 里的 syncRow 挂上：登录了、
   那篇帖子还没读过的时候才有。琥珀色跟登录弹窗里的「精华帖」、那一行的
   左边框是同一个色。写在 :hover 后面，未读时不被 hover 冲掉。 */
.nav a.essence-unremini-mark {
  color: var(--amber);
}

.nav a.essence-unremini-mark::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--amber);
}

/* ---------- ads ---------- */

.mini-mark {
  font-size: 9px;
  color: #c9b8b3;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

.lead-strip {
  position: relative;
  margin: 14px 0 0;
  border: 1px solid #4a2e28;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(100deg, #3a1f1d, #241f38 65%, #1c2436);
}

.lead-strip-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  flex-wrap: wrap;
}

.lead-strip b {
  font-family: "Noto Serif SC", serif;
  font-size: 15px;
  color: #fff;
  font-weight: 700;
}

.lead-strip p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #d8c9c6;
}

.lead-strip .cta {
  margin-left: auto;
  flex: none;
  background: var(--amber);
  color: #221a0c;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 2px;
}

.lead-strip .mini-mark {
  position: absolute;
  top: 6px;
  right: 8px;
}

.col-box {
  border: 1px solid #4a2e28;
  border-radius: 3px;
  background: linear-gradient(160deg, #2c1c1a, #1f1b2c);
  padding: 12px 13px;
  position: relative;
  margin-bottom: 14px;
}

.col-box b {
  display: block;
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  color: #fff;
  margin-bottom: 3px;
}

.col-box p {
  margin: 0 0 9px;
  font-size: 11px;
  color: #cbb9b5;
}

.col-box .cta {
  display: inline-block;
  background: var(--amber);
  color: #221a0c;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 2px;
}

.floater {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 184px;
  background: linear-gradient(140deg, #3a2f05, #1c1608);
  border: 1px solid #6b5a1a;
  border-radius: 4px;
  padding: 11px 13px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  z-index: 5;
  cursor: default;
}

.floater .x {
  position: absolute;
  top: 5px;
  right: 7px;
  color: #a89a6a;
  font-size: 12px;
  cursor: pointer;
}

.floater .mini-mark {
  display: inline-block;
  margin-bottom: 6px;
  color: #7d7259;
}

.floater b {
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  color: #ffd76a;
  text-shadow: 0 1px 0 #000;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.floater p {
  margin: 0;
  font-size: 10px;
  color: #c9bd94;
  line-height: 1.6;
}

.rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  z-index: 5;
  cursor: default;
}

.rail-l {
  left: 12px;
}

.rail-r {
  right: 12px;
}

.rail a {
  display: block;
  cursor: pointer;
}

.rail img {
  display: block;
  width: 100%;
  height: auto;
}

.rail .x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #e8e0d0;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 900px) {
  .rail {
    display: none;
  }
}

/* ---------- ticker ---------- */

.ticker {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--surface2);
  font-size: 11.5px;
  color: var(--muted);
  padding: 7px 14px;
  overflow: hidden;
  white-space: nowrap;
}

.ticker b {
  color: var(--amber);
  margin-right: 6px;
}

.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: mj-scroll 30s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ticker span {
    animation: none;
    padding-left: 0;
  }
}

@keyframes mj-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* ---------- stats ---------- */

.stats {
  border-bottom: 1px solid var(--line);
}

.stats .inner {
  display: flex;
  gap: 20px;
  padding: 9px 0;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.stats b {
  color: var(--amber);
  font-weight: 700;
}

/* ---------- layout ---------- */

main {
  padding: 24px 0 48px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 272px;
  gap: 24px;
  align-items: start;
}

footer {
  margin: 0;
  padding: 20px 16px 34px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  line-height: 1.9;
}

.flinks {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 10px;
}

.flinks a:hover {
  color: var(--amber);
}

/* ---------- board groups ---------- */

.group {
  margin-bottom: 24px;
}

.group h2 {
  margin: 0;
  font-family: "Noto Serif SC", serif;
  font-size: 14.5px;
  letter-spacing: 0.12em;
  color: var(--ink);
  font-weight: 600;
}

.group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.group-head small {
  color: var(--muted);
  font-size: 11px;
}

.group-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.boards {
  list-style: none;
  margin: 0;
  padding: 0;
}

.boards li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  padding: 13px 15px;
  margin-bottom: 2px;
}

.boards li:hover {
  border-left-color: var(--accent);
}

.boards li.promo {
  background: linear-gradient(100deg, var(--promo-tint), var(--surface2) 40%);
  border-left-color: var(--green);
}

/* 首页那条精华帖，说明见 index.html 里的注释：它是网络留声机唯一的入口，
   却待在板块列表右边那排「最后回复」里——那一列十几条大半是点不开的
   .dead，玩家翻两屏就学会了不往那儿点。

   两层提示。常驻的那层是 .essence-unread：登录之后、真正读过它之前，
   左边框一直是琥珀色，静态不动（常驻动画摆在首页上会很烦）。跟 .promo
   一样排在 :hover 后面，所以会盖掉 hover 的红色——这点跟推广行一致。
   .row-flash 是被「精华」入口跳过来时额外闪的几下。

   脉冲闪的是边框而不是背景：原来拿 --surface2 ↔ --surface3 做背景脉冲，
   这两个色深色主题下每通道只差 5–7/255（对比度 1.058:1），肉眼是分辨不
   出来的，等于白跑。边框「透明（露出行底色）↔ 琥珀」深色 8.02:1、浅色
   4.13:1，比旁边推广行那条已知可见的绿边框（深色 6.32:1）还高一档。 */
#essence {
  scroll-margin-top: 24px;
}

.boards li.essence-unread {
  border-left-color: var(--amber);
}

.boards li.row-flash {
  animation: essence-row 0.9s ease-out 3;
}

@keyframes essence-row {
  0%,
  100% {
    border-left-color: transparent;
  }
  50% {
    border-left-color: var(--amber);
  }
}

/* 关掉动画的话就让它在 .row-flash 挂着的那两秒里静态显琥珀，
   别变成什么都没有。 */
@media (prefers-reduced-motion: reduce) {
  .boards li.row-flash {
    animation: none;
    border-left-color: var(--amber);
  }
}

.board-main {
  flex: 1;
  min-width: 0;
}

.board-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.boards strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.boards p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}

.tag {
  font-size: 9.5px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.tag.top {
  color: var(--accent);
}

.tag.lock {
  color: var(--muted);
}

.tag.hot {
  color: var(--amber);
}

.tag.promo {
  color: var(--green);
}

.tag.essence {
  color: var(--amber);
}

/* 出戏标记。站内只用在避雷帖上——那是作者彩蛋，跟案子没关系。外观沿用同一
   套标签，但取最灰的颜色：玩家一眼能看出它不是帖子标题的一部分，也就不会
   以为自己漏了一条线索。 */
.tag.ooc {
  color: var(--muted);
}

.num {
  display: none;
}

.last {
  flex: none;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.last a,
.last .dead {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.last a:hover {
  color: var(--accent);
}

.last small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  margin-top: 3px;
}

.av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex: none;
  background: var(--surface3);
  border: 1px solid var(--line);
}

.av.anon {
  background: #3a373d;
}

.dead {
  color: var(--muted);
  cursor: default;
}

/* ---------- store wall ---------- */

.storewall {
  border: 1px dashed #443a2e;
  background: #1a1610;
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 26px;
}

.storewall-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 11px;
}

.storewall-head span {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.storewall-head b {
  font-family: "Noto Serif SC", serif;
  font-size: 13.5px;
  color: var(--amber);
}

.stores {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.store {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 8px;
  text-align: center;
}

.store .rank {
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--muted);
}

.storewall .store.dm1 {
  border-color: var(--amber);
  background: linear-gradient(160deg, #2a2011, #241c14 60%);
}

.store.dm1 .rank {
  color: var(--amber);
}

.store.dm1 .logo {
  box-shadow: 0 0 0 2px var(--amber);
}

.store .logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin: 0 auto 6px;
  object-fit: cover;
  display: block;
  background: var(--surface3);
}

.store b {
  display: block;
  font-size: 11.5px;
  color: #f0e7e3;
}

.storewall .store {
  background: #241c14;
}

.store small {
  color: var(--muted);
  font-size: 10px;
}

/* ---------- sidebar widgets ---------- */

.side {
  background: var(--surface2);
  border: 1px solid var(--line);
  padding: 14px 15px;
  margin-bottom: 18px;
}

.side h3 {
  margin: 0 0 11px;
  font-family: "Noto Serif SC", serif;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.side h3 small {
  color: var(--muted);
  font-size: 9.5px;
  font-family: "Noto Sans SC", sans-serif;
  letter-spacing: 0.1em;
  font-weight: 400;
}

.side p {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--muted);
}

.hot-row {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.hot-row:first-of-type {
  border-top: 0;
}

.hot-rank {
  font-size: 10.5px;
  color: var(--muted);
  flex: none;
}

.hot-row.r1 .hot-rank,
.hot-row.r2 .hot-rank,
.hot-row.r3 .hot-rank {
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow);
}

.hot-title a,
.hot-title span {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}

.hot-title a:hover {
  color: var(--accent);
}

.hot-title small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}

.online {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.online .av {
  width: 27px;
  height: 27px;
}

.online .more {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--muted);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11px;
  color: var(--muted);
}

.links a:hover {
  color: var(--amber);
}

/* ---------- thread / post ---------- */

.crumb {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 12px;
}

.crumb a:hover {
  color: var(--amber);
}

/* 精华帖门禁 */
.essence-gate[hidden] {
  display: none;
}

.essence-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  text-align: center;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.essence-gate-title {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.essence-gate-sub {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.essence-gate-btn {
  margin-top: 6px;
  padding: 8px 20px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.essence-gate-btn:hover {
  background: var(--accent);
  color: #fff;
}

.thread-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.thread h1 {
  font-family: "Noto Serif SC", serif;
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
}

.thread-time {
  flex: none;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.sub {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 16px;
}

.post {
  display: grid;
  grid-template-columns: 150px 1fr;
  background: var(--surface2);
  border: 1px solid var(--line);
  margin-bottom: 10px;
}

.post aside {
  background: var(--surface3);
  padding: 14px;
  font-size: 12.5px;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
}

.post aside a {
  color: var(--ink-soft);
}

.post aside .av {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  margin: 0 0 8px;
}

.post aside span {
  color: var(--accent);
}

/* 被禁言的账号，昵称后面挂个红标——论坛显示的是账号当前状态，
   所以他以前发过的老帖上也一样带着。 */
.banned {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-size: 11px;
  line-height: 16px;
  color: var(--accent);
  vertical-align: 1px;
}

.post aside small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
}

.post .body {
  padding: 14px 18px;
  min-width: 0;
}

.post .body p {
  margin: 0 0 10px;
}

.post .body img {
  max-width: 160px;
  max-height: 160px;
  width: auto;
  object-fit: cover;
  margin: 8px 8px 8px 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: inline-block;
  cursor: zoom-in;
}

/* 避雷帖顶上那条出戏声明。
   要够显眼——玩家漏看它就会把这帖当线索啃半天。所以给了实底色、一条 4px 的
   琥珀色左边条和正文一样大的字号，读起来像一条系统公告，而站内没有任何真实
   组件长这样，所以它同时又不会被当成论坛的一部分。
   琥珀色不填底只做描边和文字色：--amber 在深色主题是浅金、浅色主题是深棕，
   填底的话文字色得跟着两套主题反过来，描边就没这个问题。 */
.ooc-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  /* 底色不用 --surface3：它跟页面底色差不到一个色阶（浅色主题 #ececf0 对
     #eef0f2），铺上去等于没铺。改成琥珀色的半透明淡底，压在深浅两种主题上
     都能看出这是一块单独的东西。 */
  background: rgba(215, 165, 68, 0.12);
  border: 1px solid rgba(215, 165, 68, 0.45);
  border-left: 4px solid var(--amber);
  border-radius: 4px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}
.ooc-note .ooc-tag {
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-right: 7px;
}
.ooc-note strong {
  color: var(--ink);
  font-weight: 600;
}

/* 楼主贴的那段避雷视频。
   preload="none" 是关键：不点播放的话，除了封面图一个字节都不下载。这帖是
   作者彩蛋、跟破案无关，多数玩家不会看，不该让他们为一段 19 分钟的视频付
   流量。尺寸比正文那些 160px 的缩略图大一截——封面上的标题得看得见，播放
   键也得点得到。 */
.post .body .post-video {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 8px 0;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.photo-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 10px;
}

.post .body .photo-row img {
  margin: 0;
  flex: 0 0 auto;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 16, 0.92);
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 48px 16px 24px;
  overflow: auto;
}

.lightbox[hidden] {
  display: none !important;
}

.lightbox img {
  max-width: min(100%, 560px);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
}

.lightbox img.is-zoomed {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
}

.lb-close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
  padding: 8px 12px;
}

.lb-prev[hidden],
.lb-next[hidden] {
  display: none !important;
}

.lb-prev {
  left: 4px;
}

.lb-next {
  right: 4px;
}

.time {
  color: var(--muted);
  font-size: 11.5px;
}

.nest {
  margin: 12px 0 4px;
  background: var(--surface3);
  border: 1px solid var(--line);
}

.nest-item {
  padding: 8px 12px;
  border-top: 1px dashed var(--line);
  font-size: 14.5px;
}

.nest-item:first-child {
  border-top: 0;
}

.nest-item b {
  font-weight: 600;
  color: var(--ink-soft);
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nest-item b .av {
  width: 20px;
  height: 20px;
}

.nest-item .to {
  color: var(--muted);
  font-size: 12.5px;
}

.nest-item p {
  margin: 4px 0 0;
}

/* ---------- profile ---------- */

.profile {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  background: var(--surface2);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}

.profile .last-seen {
  align-self: start;
  padding: 16px 20px 0 0;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
}

.profile .last-seen b {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 600;
}

.profile > img {
  width: 150px;
  height: 190px;
  object-fit: cover;
  background: var(--surface3);
}

.profile .info {
  padding: 16px 20px;
}

.profile h1 {
  margin: 0 0 8px;
  font-family: "Noto Serif SC", serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.profile .meta {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12.5px;
}

.sns {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.sns:hover {
  color: var(--amber);
}

.sns[aria-disabled="true"] {
  cursor: pointer;
}

.sns-row {
  display: flex;
  gap: 18px;
  margin-top: 10px;
}

.sns-row .sns {
  margin-top: 0;
}

.sns img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

/* ---------- generic list widgets (profile "主题", search hits) ---------- */

.hots {
  background: var(--surface2);
  border: 1px solid var(--line);
}

.hots h2 {
  margin: 0;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0.14em;
  font-weight: 600;
  background: var(--surface3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.hots ol {
  margin: 0;
  padding: 8px 16px 16px 32px;
}

.hots li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}

.hots li:last-child {
  border-bottom: 0;
}

.hots a:hover {
  color: var(--accent);
}

.hots small {
  color: var(--muted);
  float: right;
}

.hits {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface2);
  border: 1px solid var(--line);
}

.hits li {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

.hits li:first-child {
  border-top: 0;
}

.hits a:hover {
  color: var(--accent);
}

.hits small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.empty {
  background: var(--surface2);
  border: 1px solid var(--line);
  padding: 28px 16px;
  color: var(--muted);
  text-align: center;
}

.hits li.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hits li.user-row .av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.hits li.empty-row {
  color: var(--muted);
  text-align: center;
}

@media (max-width: 720px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .boards li {
    flex-wrap: wrap;
  }

  .last {
    width: 100%;
    justify-content: flex-end;
  }

  .post {
    grid-template-columns: 1fr;
  }

  .post aside {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .post aside .av {
    margin: 0;
  }

  .profile {
    grid-template-columns: 1fr;
  }

  .profile > img {
    width: 100%;
    height: 220px;
  }

  .stores {
    grid-template-columns: repeat(3, 1fr);
  }

  .brand-badge {
    width: 38px;
    height: 38px;
  }

  /* 私信：手机上改成「两屏」，不再把一个框上下劈成两半。
     原来是列表固定 220px 压在上面，聊天分剩下的——可整个框统共只有
     min(72vh, 620px) 高，落到手机上聊天区常常只剩一百多像素，一屏看不
     全三条消息，玩家得在一条缝里读完整场对话，而这一页恰恰是全站文字
     最长的地方。
     现在按手机 IM 的常规来：先只给会话列表，点进去整屏都是聊天，顶上
     一条「‹ 全部会话」退回去。两态由 pm.html 那段脚本切 is-thread-open，
     宽屏没有这个类，两栏并排的老样子一点没动。 */
  .pm-box {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .pm-list {
    border-right: 0;
    max-height: none;
    overflow-y: visible;
  }

  /* 列表态：手指点得着的行高，一屏正好四条会话。 */
  .pm-conv {
    padding: 15px 14px;
  }

  .pm-conv p {
    max-width: none;
  }

  .pm-panel {
    display: none;
  }

  .pm-box.is-thread-open .pm-list {
    display: none;
  }

  .pm-box.is-thread-open .pm-panel {
    display: flex;
  }

  .pm-box.is-thread-open .pm-back {
    display: flex;
  }

  /* 会话态占满一屏。点开的时候脚本会把这个框顶到视口最上面，所以这里
     不用给顶栏留位置——顶栏不是 sticky，滚上去就没了；减掉的那点只是
     底下留的余白。dvh 用来躲开手机浏览器那条会缩的地址栏，前面那行
     vh 是给不认 dvh 的旧内核兜底。 */
  .pm-box.is-thread-open {
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    overflow: hidden;
  }

  .pm-msg {
    max-width: 100%;
  }
}

/* ---------- 新帖提醒 ---------- */

/* 解开沂河畔那条会话之后从右上角弹出来的站内提醒。整块都是链接，
   右上角那个 × 才是关掉。 */
.new-post-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  padding: 12px 26px 12px 14px;
  animation: toast-in 0.32s ease-out;
}

.new-post-toast a {
  color: var(--ink);
  text-decoration: none;
  display: block;
}

.new-post-toast b {
  display: block;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 4px;
}

.new-post-toast p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.new-post-toast a:hover p {
  color: var(--ink);
}

.new-post-toast .x {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.new-post-toast .x:hover {
  color: var(--ink);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 520px) {
  .new-post-toast {
    width: auto;
    left: 12px;
    right: 12px;
    top: 12px;
  }
}

/* ---------- 结局：新私信提醒 / 最终选择 ---------- */

.auth-cancel {
  background: var(--surface3);
  color: var(--ink-soft);
}

.auth-cancel:hover {
  color: var(--ink);
}

/* 红点。顶栏那颗贴在私信按钮右上角，会话列表那颗跟在右边一起闪。 */
.pm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: pm-blink 1.05s ease-in-out infinite;
}

a.user-pm .pm-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}

a.user-pm.has-new {
  position: relative;
  animation: pm-glow 1.05s ease-in-out infinite;
}

.pm-conv.has-new {
  position: relative;
  animation: pm-row 1.05s ease-in-out infinite;
}

.pm-conv.has-new > .pm-dot {
  position: absolute;
  right: 10px;
  bottom: 12px;
}

.pm-conv.has-new strong {
  color: var(--accent);
}

@keyframes pm-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

@keyframes pm-glow {
  0%,
  100% {
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  50% {
    box-shadow: 0 0 0 8px transparent;
  }
}

@keyframes pm-row {
  0%,
  100% {
    background: var(--surface3);
  }
  50% {
    background: transparent;
  }
}

/* 面板不是跟着触发它的那条消息同一瞬间冒出来的（finale.js 里等了
   PANEL_RISE_DELAY_MS 才插进 DOM）——插进来之后再自己从下面浮上来，
   而不是直接摆在那，看着才像"消息说完，轮到你决定了"这个先后顺序。 */
@keyframes pm-panel-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 最终选择。顶掉原来那个禁用的回复框。 */
.pm-choices {
  border-top: 1px solid var(--line);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface2);
  animation: pm-panel-rise 0.4s ease-out;
}

.pm-choices-hint {
  margin: 0 0 2px;
  font-size: 12.5px;
  color: var(--muted);
}

/* 之前跟收到的消息气泡用的是同一个底色（surface3），玩家很容易把选项
   看成对方发来的话。改成描边 + 强调色文字，看着就是个按钮，不是句台词。 */
.pm-choice {
  text-align: left;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
}

.pm-choice:hover:not(:disabled) {
  background: var(--accent-glow);
}

.pm-choice:disabled {
  cursor: default;
  opacity: 0.45;
}

.pm-choice.is-picked {
  opacity: 1;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* ---------- 结局：打字中提示 / 多选项横排 ---------- */

.pm-typing-dots {
  display: flex !important;
  align-items: center;
  gap: 4px;
  padding: 12px 14px !important;
}

.pm-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: 0.4;
  animation: pm-typing-bounce 1.2s infinite ease-in-out;
}

.pm-typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.pm-typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes pm-typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 0.9;
  }
}

/* 选项多（比如"你觉得是谁干的"那种嫌疑人列表）横排铺开，
   比一条条铺满整行更像在挑一个名字，而不是在读一份声明。 */
.pm-choices.pm-choices-row {
  flex-direction: row;
  flex-wrap: wrap;
}

.pm-choices.pm-choices-row .pm-choice {
  flex: 0 1 auto;
  text-align: center;
}

/* 系统提示（"对方已下线"这种），跟日期分割线区分开——不带两侧的横线，
   就是一颗居中的小灰药丸，观感更像客户端自己弹的系统消息，不是于夏文说的话。 */
.pm-system-note {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.pm-system-note span {
  background: var(--surface3);
  color: var(--muted);
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ---------- 结局：报警/等待这类"决定"，不是要说的话 ---------- */

/* 跟 pm-choices（回复草稿的选项条，贴在输入框上方）不一样——这种是直接
   摆在聊天记录里的两个大按钮，读起来像游戏在问你要怎么做，而不是在帮你
   拟一句要发给于夏文的话（他这时候已经下线了，发消息给他说不通）。 */
.pm-decision {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  animation: pm-panel-rise 0.4s ease-out;
}

.pm-decision-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.pm-decision-row {
  display: flex;
  gap: 12px;
}

.pm-decision-btn {
  border: 1px solid var(--accent);
  background: var(--surface2);
  color: var(--accent);
  padding: 9px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.pm-decision-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.pm-decision-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------- Mochi 彩蛋：整站文字喵化前的一下闪烁 ---------- */
/* 换字前先在这个元素上闪一下，提示"这里要变了"——跟 finale.js 里
   runMochiCorruption 配合，每批字提交前后各挂/摘一次这个类。 */
.mochi-flicker {
  animation: mochi-flicker-anim 0.13s steps(2, end);
}

@keyframes mochi-flicker-anim {
  0%,
  100% {
    opacity: 1;
    filter: none;
  }
  50% {
    opacity: 0.25;
    filter: brightness(2.2);
  }
}

/* ---------- Mochi 彩蛋：鼠标变猫脸 ---------- */
/* 默认闭嘴，按下鼠标键那一下换成张嘴的（finale.js 里 mousedown/mouseup
   切 mochi-pressed 这个类）。按钮、链接这些元素自己常年写死了
   cursor: pointer，光在 body 上挂一条规则盖不住那些更具体的选择器，
   所以对 * 也写一遍，配合 !important。 */
body.mochi-mode,
body.mochi-mode * {
  cursor: url("./img/mochi-cursor-default.png") 5 5, auto !important;
}

body.mochi-mode.mochi-pressed,
body.mochi-mode.mochi-pressed * {
  cursor: url("./img/mochi-cursor-active.png") 5 5, auto !important;
}


/* 投凶前那个提示框里的「已解锁页面数」。放在标题下面、正文上面，
   一进来就能看见自己探到什么程度。 */
.auth-box .finale-pages {
  margin: 0 0 14px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--muted, #8f838c);
}

/* 纯装饰的假链接：设为首页/加入收藏/手机版、复制群号/加管理微信。
   真有玩家把"加管理微信"当成谜题点了半天——它们本来就没有 href，
   但 hover 变色 + 手型光标看着仍然像能点，所以干脆连指针事件一起掐掉。 */
a.dead {
  pointer-events: none;
}