/* ============================================================
   要饭宝 yaofanbao.com — 单调 · 破碎 · 灰色
   ============================================================ */

:root {
  --paper: #dedad2;
  --paper-2: #d3cec4;
  --card: #e6e2da;
  --ink: #1b1916;
  --ink-2: #4a463f;
  --gray: #6f6a60;
  --line: #a29c92;
  --line-2: #8b857b;
  --blood: #8c2b1e;
  --blood-soft: #a8483a;
  --ash: #b4aea3;
  --hi: #f2efe8;
  --shadow: rgba(20, 18, 15, .18);
  --noise-op: .42;
  --scan-op: .05;
}

html[data-theme="night"] {
  --paper: #16150f;
  --paper-2: #100f0b;
  --card: #1f1d17;
  --ink: #d9d5cb;
  --ink-2: #a9a49a;
  --gray: #8b867c;
  --line: #4b4740;
  --line-2: #5c574f;
  --blood: #b4503f;
  --blood-soft: #c4665a;
  --ash: #5a554d;
  --hi: #262419;
  --shadow: rgba(0, 0, 0, .55);
  --noise-op: .3;
  --scan-op: .08;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .02em;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background .25s, color .25s;
}

/* ---------- 噪点 / 扫描线 / 裂纹：破碎感三件套 ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: var(--noise-op);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: multiply;
}
html[data-theme="night"] body::before { mix-blend-mode: overlay; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: var(--scan-op);
  background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 4px);
}

.crack-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'><g stroke='%23111' fill='none' stroke-width='1.1'><path d='M80 -20 L120 180 L60 320 L140 470 L100 640 L150 820'/><path d='M120 180 L260 150 L330 250'/><path d='M430 -20 L470 120 L400 260 L480 400 L420 560 L470 700'/><path d='M470 120 L620 90 L700 200 L820 160'/><path d='M900 -20 L860 160 L930 300 L870 470 L920 640 L880 820'/><path d='M860 160 L760 220 L700 340'/><path d='M1080 -20 L1120 140 L1050 290 L1130 430 L1070 600 L1120 800'/><path d='M0 520 L120 560 L230 520 L340 580 L470 540 L600 590 L730 545 L860 595 L990 550 L1120 600 L1200 560'/></g></svg>");
  background-size: cover;
}
html[data-theme="night"] .crack-bg { filter: invert(1); opacity: .12; }

/* ---------- 布局 ---------- */
.wrap {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 90px;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--blood); }

/* ---------- 顶部 ---------- */
.topbar {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  padding: 10px 0 8px;
}
.topbar .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.brand {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .18em;
  position: relative;
  display: inline-block;
}
.brand span.seal {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--hi);
  background: var(--blood);
  padding: 3px 6px;
  transform: rotate(-2deg);
  vertical-align: middle;
}
.domain {
  font-size: 11px;
  color: var(--gray);
  letter-spacing: .16em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.topbar nav { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.topbar nav a {
  font-size: 13px;
  padding: 5px 10px;
  color: var(--ink-2);
  border: 1px solid transparent;
  letter-spacing: .1em;
}
.topbar nav a:hover,
.topbar nav a.on {
  color: var(--ink);
  border-color: var(--line);
  background: var(--card);
}
.icon-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font-size: 12px;
  padding: 5px 9px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .08em;
}
.icon-btn:hover { color: var(--blood); border-color: var(--blood); }

/* ---------- 通用零件 ---------- */
.h-title {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: 30px;
  letter-spacing: .12em;
  margin: 34px 0 6px;
  position: relative;
  display: inline-block;
}
.h-title::after {
  content: "";
  position: absolute;
  left: 0; right: -14px; bottom: -6px;
  height: 3px;
  background: var(--ink);
  opacity: .75;
  clip-path: polygon(0 0, 12% 100%, 20% 0, 34% 100%, 41% 0, 58% 100%, 66% 0, 78% 100%, 86% 0, 100% 60%, 100% 0);
}
.sub {
  color: var(--gray);
  font-size: 13px;
  letter-spacing: .14em;
  margin-bottom: 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 18px 20px;
  position: relative;
}
.card.torn {
  clip-path: polygon(0 6px, 8% 0, 22% 5px, 38% 0, 55% 6px, 72% 0, 88% 5px, 100% 0, 100% calc(100% - 5px), 86% 100%, 70% calc(100% - 6px), 52% 100%, 34% calc(100% - 4px), 16% 100%, 0 calc(100% - 6px));
}
.card.tilt-l { transform: rotate(-.5deg); }
.card.tilt-r { transform: rotate(.4deg); }

.tape {
  position: absolute;
  top: -10px;
  left: 24px;
  width: 74px;
  height: 20px;
  background: rgba(180, 174, 163, .55);
  border: 1px solid rgba(120, 114, 104, .35);
  transform: rotate(-3deg);
  font-size: 9px;
  line-height: 18px;
  text-align: center;
  color: var(--gray);
  letter-spacing: .2em;
}

.btn {
  display: inline-block;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .1em;
  padding: 7px 16px;
  cursor: pointer;
  transition: .15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.red { border-color: var(--blood); color: var(--blood); }
.btn.red:hover { background: var(--blood); color: var(--hi); }
.btn.sm { font-size: 12px; padding: 4px 10px; }
.btn.ghost { border-color: var(--line); color: var(--ink-2); }
.btn.ghost:hover { background: var(--ink-2); color: var(--paper); }

input, textarea, select {
  font-family: inherit;
  font-size: 14px;
  background: var(--hi);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 10px;
  outline: none;
  width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--blood); }
textarea { resize: vertical; line-height: 1.7; }
label.f {
  display: block;
  font-size: 12px;
  color: var(--gray);
  letter-spacing: .12em;
  margin: 10px 0 4px;
}

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.dim { color: var(--gray); }
.tiny { font-size: 12px; }
.center { text-align: center; }
.mt { margin-top: 22px; }
.mb { margin-bottom: 22px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .12em;
  border: 1px solid var(--line);
  color: var(--gray);
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
}
.tag.on { border-color: var(--blood); color: var(--blood); background: transparent; }

hr.broken {
  border: none;
  height: 2px;
  margin: 30px 0;
  background: var(--line);
  clip-path: polygon(0 0, 6% 100%, 11% 0, 20% 100%, 26% 0, 37% 100%, 44% 0, 55% 100%, 61% 0, 72% 100%, 79% 0, 89% 100%, 95% 0, 100% 100%);
  opacity: .8;
}

/* 大字短句 */
.big-quote {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: clamp(22px, 4.4vw, 40px);
  line-height: 1.6;
  letter-spacing: .06em;
  margin: 26px 0;
  position: relative;
  padding-left: 22px;
  border-left: 4px solid var(--blood);
}
.big-quote .src {
  display: block;
  font-size: 12px;
  font-family: inherit;
  color: var(--gray);
  letter-spacing: .2em;
  margin-top: 10px;
}

.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before, .glitch::after {
  content: attr(data-t);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
}
.glitch::before { color: var(--blood); transform: translate(-2px, 1px); clip-path: inset(0 0 55% 0); opacity: .7; }
.glitch::after { color: var(--gray); transform: translate(2px, -1px); clip-path: inset(58% 0 0 0); opacity: .55; }

/* ---------- 首页 hero ---------- */
.hero {
  padding: 46px 0 10px;
  position: relative;
}
.hero h1 {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: clamp(38px, 9vw, 92px);
  line-height: 1.05;
  letter-spacing: .06em;
  margin: 0;
  font-weight: 700;
}
.hero h1 em {
  font-style: normal;
  color: var(--blood);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--ash);
}
.hero p.lead {
  font-size: 15px;
  color: var(--ink-2);
  max-width: 620px;
  margin-top: 18px;
  border-left: 2px solid var(--line);
  padding-left: 14px;
}
.stamp {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 128px;
  height: 128px;
  border: 3px double var(--blood);
  color: var(--blood);
  transform: rotate(14deg);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: "Songti SC", serif;
  font-size: 15px;
  letter-spacing: .14em;
  opacity: .78;
  line-height: 1.3;
  pointer-events: none;
}
@media (max-width: 700px) { .stamp { display: none; } }

/* 统计条 */
.stats { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--line); }
.stats div {
  flex: 1 1 150px;
  padding: 14px 12px;
  border-right: 1px solid var(--line);
  text-align: center;
}
.stats div:last-child { border-right: none; }
.stats b {
  display: block;
  font-family: "Songti SC", serif;
  font-size: 30px;
  letter-spacing: .04em;
}
.stats span { font-size: 11px; color: var(--gray); letter-spacing: .18em; }

/* ---------- 短句列表 ---------- */
.qlist { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.q {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 14px 16px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
}
.q:nth-child(3n+1) { transform: rotate(-.4deg); }
.q:nth-child(3n+2) { transform: rotate(.3deg); }
.q .txt {
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 17px;
  line-height: 1.65;
  flex: 1;
}
.q .meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.q .ops { display: flex; gap: 6px; opacity: .35; transition: .15s; }
.q:hover .ops { opacity: 1; }
.q .ops button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--gray);
  font-size: 11px;
  padding: 2px 7px;
  cursor: pointer;
  font-family: inherit;
}
.q .ops button:hover { color: var(--blood); border-color: var(--blood); }
.q.mine { border-style: dashed; }

/* ---------- 音乐 ---------- */
.player {
  border: 1px solid var(--ink);
  background: var(--card);
  padding: 18px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.player .now { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.player .ttl { font-family: "Songti SC", serif; font-size: 22px; letter-spacing: .08em; }
.wave { width: 100%; height: 64px; display: block; background: var(--paper-2); border: 1px solid var(--line); }
.seek { width: 100%; }
.tracks { display: grid; gap: 8px; margin-top: 18px; }
.trk {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  padding: 9px 12px;
  cursor: pointer;
  background: var(--card);
}
.trk:hover { border-color: var(--ink-2); }
.trk.playing { border-color: var(--blood); background: var(--hi); }
.trk .no { font-family: ui-monospace, monospace; font-size: 12px; color: var(--gray); }
.trk .nm { font-size: 15px; }
.trk .ar { font-size: 12px; color: var(--gray); }
.trk .du { font-size: 12px; color: var(--gray); font-family: ui-monospace, monospace; }
.lyric {
  white-space: pre-wrap;
  font-family: "Songti SC", serif;
  font-size: 16px;
  line-height: 2.1;
  color: var(--ink-2);
  border-left: 3px solid var(--ash);
  padding-left: 14px;
  min-height: 120px;
}
.lyric .on { color: var(--blood); font-weight: 700; }

/* ---------- 测试 ---------- */
.quiz-q { padding: 18px 0; border-bottom: 1px dashed var(--line); }
.quiz-q .qq { font-size: 17px; margin-bottom: 10px; font-family: "Songti SC", serif; }
.opt {
  display: block;
  border: 1px solid var(--line);
  padding: 9px 12px;
  margin-bottom: 7px;
  cursor: pointer;
  font-size: 14px;
  background: var(--card);
}
.opt:hover { border-color: var(--ink-2); }
.opt.sel { border-color: var(--blood); color: var(--blood); }
.lv-card { text-align: center; padding: 30px 20px; }
.lv-card .lv-name {
  font-family: "Songti SC", serif;
  font-size: clamp(26px, 5vw, 46px);
  letter-spacing: .14em;
  color: var(--blood);
}
.lv-card .lv-no { font-size: 13px; color: var(--gray); letter-spacing: .3em; }

/* ---------- 墙 ---------- */
.wall { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.note {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 14px 16px;
  position: relative;
  font-size: 14px;
  line-height: 1.85;
}
.note:nth-child(2n) { transform: rotate(.6deg); }
.note:nth-child(3n) { transform: rotate(-.5deg); }
.note .who { font-size: 12px; color: var(--gray); margin-top: 10px; letter-spacing: .1em; }
.note .pin {
  position: absolute;
  top: -7px; left: 50%;
  width: 12px; height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--blood);
  box-shadow: 0 2px 3px var(--shadow);
}

/* ---------- 工具 ---------- */
.calc-out {
  font-family: "Songti SC", serif;
  font-size: 20px;
  padding: 16px;
  border: 1px dashed var(--blood);
  color: var(--blood);
  margin-top: 14px;
  min-height: 60px;
}
canvas#poster, canvas#namecard {
  max-width: 100%;
  border: 1px solid var(--line);
  display: block;
  background: var(--card);
}

/* ---------- 分享条 ---------- */
.share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share-row a.btn, .share-row button.btn { font-size: 12px; padding: 5px 12px; }

/* ---------- 页脚 ---------- */
footer {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding: 26px 0 40px;
  font-size: 12px;
  color: var(--gray);
  letter-spacing: .1em;
  position: relative;
  z-index: 2;
}
footer .inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
footer .fl { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- 转发面板 ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, .55);
  z-index: 99990;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.modal.on { display: flex; }
.modal-box {
  background: var(--card);
  border: 1px solid var(--ink);
  border-bottom: none;
  padding: 20px 22px 26px;
  width: min(680px, 100%);
  max-height: 82vh;
  overflow: auto;
  box-shadow: 0 -8px 30px var(--shadow);
}

/* toast */
#toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper);
  padding: 9px 20px;
  font-size: 13px;
  letter-spacing: .1em;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: .22s;
  border: 1px solid var(--blood);
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ash); border: 2px solid var(--paper-2); }

@media print { .topbar, footer, .no-print { display: none; } }