/* =========================================================
   电子抽签 · 样式
   与《答案之书》同一副笔墨：墨地、宣纸字、金线分隔。
   签筒用等宽字排，摇的时候整块抖，落定后一支签升出筒口。
   ========================================================= */
:root {
  --ink-0: #0d0b09;
  --ink-1: #14110e;
  --ink-2: #1c1815;
  --line: #3a3128;
  --paper: #e8ddc9;
  --paper-dim: #b7ab97;
  --paper-faint: #7d7365;
  --gold: #c8a24a;
  --gold-dim: #8a6f31;
  --cinnabar: #b4472e;
  --jade: #6f9276;
  --radius: 14px;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", "Georgia", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "SFMono-Regular", Menlo, Consolas, "Sarasa Mono SC",
          "Noto Sans Mono CJK SC", "Microsoft YaHei", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1200px 700px at 12% -10%, #221c16 0%, rgba(34,28,22,0) 60%),
    radial-gradient(900px 600px at 105% 5%, #1a1a20 0%, rgba(26,26,32,0) 55%),
    var(--ink-0);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold-dim); color: #fff; }

.wrap { max-width: 780px; margin: 0 auto; padding: 28px 20px 60px; }

/* ---------- 页眉 ---------- */
.masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.title { font-family: var(--serif); font-size: 30px; letter-spacing: .2em; margin: 0; font-weight: 600; }
.subtitle { color: var(--paper-faint); font-size: 13px; letter-spacing: .08em; margin: 4px 0 0; }
.masthead-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--paper-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px; background: rgba(0,0,0,.28); letter-spacing: .03em;
}
.pill.ready { color: var(--jade); border-color: rgba(111,146,118,.45); }
.pill.warn { color: var(--cinnabar); border-color: rgba(180,71,46,.5); }

/* ---------- 卡片 ---------- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.9);
}
.card + .card { margin-top: 20px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; letter-spacing: .18em; color: var(--gold-dim);
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.card-head .tools { display: flex; gap: 8px; align-items: center; }

/* ---------- 一 · 择签之处 ---------- */
.gods { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.god {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 15px; cursor: pointer;
  background: rgba(0,0,0,.24);
  border: 1px solid var(--line); border-radius: 11px;
  color: var(--paper); font-family: inherit;
  transition: border-color .18s, background .18s, transform .18s;
}
.god:hover { border-color: var(--gold-dim); transform: translateY(-1px); }
.god.on { border-color: var(--gold); background: rgba(200,162,74,.09); box-shadow: inset 0 0 0 1px rgba(200,162,74,.18); }
.god-deity { font-family: var(--serif); font-size: 21px; letter-spacing: .1em; }
.god-name { color: var(--gold); font-size: 13px; letter-spacing: .04em; }
.god-meta { color: var(--paper-faint); font-size: 11.5px; }

.blurb { color: var(--paper-dim); font-size: 13.5px; margin: 14px 0 0; line-height: 1.75; }
.schema { color: var(--paper-faint); font-size: 11.5px; margin: 8px 0 0; letter-spacing: .04em; }
.schema:empty { display: none; }

/* ---------- 二 · 默念 ---------- */
.field { display: block; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field-label {
  display: block; color: var(--gold-dim); font-size: 11.5px;
  letter-spacing: .1em; margin-bottom: 6px;
}
textarea {
  width: 100%; resize: vertical; min-height: 76px;
  padding: 11px 13px; line-height: 1.7;
  background: rgba(0,0,0,.3); color: var(--paper);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--serif); font-size: 15px;
}
textarea::placeholder { color: #5d554a; }
textarea:focus { outline: none; border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(200,162,74,.09); }

/* ---------- 三 · 摇签 ---------- */
.altar {
  display: flex; justify-content: center;
  padding: 22px 0 10px;
  transform-origin: 50% 70%;
  will-change: transform;
}
.tube {
  margin: 0; font-family: var(--mono); font-size: 15px; line-height: 1.34;
  letter-spacing: 0; color: var(--paper);
  text-align: center; white-space: pre;
  text-shadow: 0 0 18px rgba(200,162,74,.16);
}
.draw-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.shake-info { color: var(--paper-faint); font-size: 12px; letter-spacing: .05em; min-height: 1.2em; }
.hint { color: var(--paper-faint); font-size: 11.5px; text-align: center; margin: 12px 0 0; }

button {
  font-family: inherit; cursor: pointer; border-radius: 10px;
  transition: border-color .18s, color .18s, background .18s, opacity .18s;
}
button.primary {
  padding: 12px 34px; font-family: var(--serif); font-size: 17px; letter-spacing: .18em;
  color: var(--ink-0); background: linear-gradient(180deg, #dcb75c, var(--gold));
  border: 1px solid #e5c877; box-shadow: 0 12px 26px -16px rgba(200,162,74,.85);
}
button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #e6c470, #d0aa52); }
button.primary:disabled { opacity: .55; cursor: progress; }
button.ghost {
  padding: 5px 12px; font-size: 12px; letter-spacing: .06em;
  color: var(--paper-dim); background: rgba(0,0,0,.25); border: 1px solid var(--line);
}
button.ghost:hover { color: var(--paper); border-color: var(--gold-dim); }

/* ---------- 四 · 签文 ---------- */
.sign-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sign-no { font-family: var(--serif); font-size: 22px; letter-spacing: .06em; }
.sign-count { font-size: 11.5px; color: var(--paper-faint); margin-left: 10px; letter-spacing: .04em; }
.level {
  font-family: var(--serif); font-size: 13px; letter-spacing: .1em;
  padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--paper-dim);
}
.level.lv7, .level.lv6 { color: #f0c860; border-color: rgba(240,200,96,.5); background: rgba(240,200,96,.08); }
.level.lv5, .level.lv4 { color: var(--jade); border-color: rgba(111,146,118,.5); }
.level.lv3 { color: var(--paper-dim); }
.level.lv2, .level.lv1 { color: #cf7a63; border-color: rgba(180,71,46,.45); }
.level.note { border-style: dashed; }

.sign-book { color: var(--gold-dim); font-size: 12px; letter-spacing: .05em; margin-top: 6px; }
.sign-title { font-family: var(--serif); font-size: 17px; letter-spacing: .04em; margin-top: 12px; color: var(--paper); }

.poem {
  font-family: var(--serif); font-size: 23px; line-height: 2.05; letter-spacing: .12em;
  margin: 18px 0 4px; padding: 18px 16px;
  background: rgba(0,0,0,.26); border-left: 2px solid var(--gold-dim); border-radius: 0 10px 10px 0;
}
.poem div + div { margin-top: 2px; }

.story { margin-top: 16px; }
.story .k, .lead .k, .vow-echo .k, .rest-head {
  color: var(--gold-dim); font-size: 11.5px; letter-spacing: .14em; margin-bottom: 6px;
}
.story .v, .lead .v, .vow-echo .v { color: var(--paper-dim); font-size: 14px; line-height: 1.8; }
.lead { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.lead .v { font-family: var(--serif); font-size: 16.5px; line-height: 1.95; color: var(--paper); }

.rest { margin-top: 18px; }
.rest-head { padding-top: 16px; border-top: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: 8.6em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(58,49,40,.7); }
.kv:last-child { border-bottom: none; }
.kv b { color: var(--gold-dim); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; }
.kv span { color: var(--paper-dim); font-size: 13.5px; line-height: 1.8; }

/* 典故的副题（storySub，如「完璧归赵」「三跳涧」）：
   原来是数据里有、页面上不显示的死数据，现在摆出来了。
   当成小标题搁在正文上头，不跟正文一个字号，免得抢戏。 */
.story .sub {
  margin: 2px 0 9px; color: var(--gold-dim);
  font-family: var(--serif); font-size: 14px; letter-spacing: .06em;
}
.story .sub .audited { display: inline-block; }

/* 原网页注记：采集方写在正文里的方括号交代，被摘出来单放这儿。
   得说清是「原网页那边就缺」，不是本页编的——所以标着出处，
   跟正文拉开距离：淡字、细边、跟 audit 的虚线按钮区分开。 */
.origin-note {
  display: block; margin: 0 0 10px; padding: 7px 11px;
  background: rgba(58,49,40,.05); border-left: 2px solid rgba(58,49,40,.35);
  font-size: 12.5px; line-height: 1.75; color: var(--paper-dim);
}
.origin-note .k {
  display: inline-block; margin-right: 8px; padding: 0 6px;
  color: var(--gold-dim); font-size: 11px; letter-spacing: .06em;
  border: 1px solid rgba(58,49,40,.5); border-radius: 2px;
}
.origin-note .t { font-family: var(--serif); font-size: 13.5px; }
.poem .origin-note { margin-bottom: 12px; }
.origin-note + .audited { margin-top: 0; }

.vow-echo { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.vow-echo .v { white-space: pre-wrap; color: var(--paper-dim); font-family: var(--serif); font-size: 14.5px; }
.src { color: var(--paper-faint); font-size: 11px; margin: 20px 0 0; line-height: 1.7; }

/* 待校字段：语料没校完，坏字所在的那一栏先收起。
   做得像一条校注，不像报错——虚线、灰字，跟正文拉开距离。
   原文不删，点开就在下面；校完重建后这一栏照常显示。 */
.audited { display: block; }
.audited-toggle {
  font: inherit; font-size: 11.5px; line-height: 1.7; letter-spacing: .04em;
  color: var(--paper-faint); background: none; cursor: pointer;
  border: 1px dashed rgba(58,49,40,.85); border-radius: 2px;
  padding: 2px 9px;
}
.audited-toggle:hover { color: var(--paper-dim); border-color: var(--gold-dim); }
.audited-body {
  display: block; margin-top: 9px; padding: 9px 11px;
  color: var(--paper-dim); font-family: var(--serif); font-size: 13.5px; line-height: 1.8;
  background: rgba(58,49,40,.05); border-left: 2px solid rgba(58,49,40,.5);
  white-space: pre-wrap;
}
/* 签诗那块本来是逐句一行，收起时提示语要跟着诗的字号走 */
.poem .audited-toggle { font-family: var(--serif); }

/* ---------- 页脚 ---------- */
footer {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--paper-faint); font-size: 11.5px; line-height: 1.85; text-align: center;
}
footer a { color: var(--gold-dim); }

@media (max-width: 560px) {
  .title { font-size: 24px; }
  .poem { font-size: 19px; padding: 15px 12px; }
  .tube { font-size: 12.5px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .altar { will-change: auto; }
}