/* ============================================================
   quiz / depth.css  —  深度页专用
   ------------------------------------------------------------
   落地页是演播室：抢答器、色带、字幕条。
   这一页是那台计时器本身 —— 一整块黑色的击打面，
   周围全是印刷卡片，数字大到隔着房间也读得出来。

   五个深度页刻意各长各的：
     game/charts     终端 —— 等宽、零圆角、一百行贴着行
     fortune/bazi    历书 —— 衬线、居中、大留白
     body/calculator 仪表 —— 暖炭黑、左右分栏、一次一条线在动
     anime/season    图表跨页 —— 纯白、硬黑粗线、直接拖那条切线
     这里            计分板 —— 纸底、一块黑砖、硬投影卡片、只有一个动作

   只重新赋值 skin.css 已经定好的 token，不新增变量名。
   ============================================================ */

.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 3px solid var(--ink);
  font-size: var(--step--1); font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
}
.top a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.top a:hover { color: var(--accent); }
.top .tally { color: var(--muted); font-variant-numeric: tabular-nums; }

.doc {
  max-width: 62rem; margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: grid; gap: var(--sp-6);
}
.head { display: grid; gap: var(--sp-4); }
/* 台标条在落地页是 flex 子元素，skin.css 只写了 align-self: start 就够。
   这里 .head 是 grid，横向要另外收 —— 不收就拉成一条横贯版面的黄带子。 */
.head .eyebrow { justify-self: start; }
/* 落地页的标题只有一行，所以 skin.css 那层 7px 硬投影没事。这一页是两行，
   上一行的投影正好压在下一行的字上，怎么调行距都像套印没对准。硬投影的味道
   这一页已经由黑砖、卡片、小标题四处的 box-shadow 扛着了，标题上不必再来一层。 */
.head .hero-title { line-height: 1.04; text-shadow: none; }
.head .lede { max-width: var(--measure); font-size: var(--step-0); color: var(--muted); }

.block { display: grid; gap: var(--sp-4); }
.sec-title {
  font-size: var(--step-2); font-weight: 900; line-height: 1.05;
  color: var(--accent-ink); background: var(--ink);
  padding: var(--sp-2) var(--sp-4); justify-self: start;
  box-shadow: 5px 5px 0 var(--accent);
}
/* 口径小标题和「还有别的页」这种收尾标题：同一块黑砖，小一号、投影也收窄。
   不做成另一种形状 —— 一页里两种标题样式就已经开始像拼出来的了。 */
.sec-title.small {
  font-size: var(--step-0); box-shadow: 3px 3px 0 var(--accent);
  padding: var(--sp-2) var(--sp-3);
}

/* ---- 击打面 -------------------------------------------------
   整页只有这一个可点的东西。用真 <button>：键盘、焦点、触屏
   全是浏览器给的，自己拿 div 重做一遍只会做漏。 */
.slab {
  display: grid; place-content: center; gap: var(--sp-3);
  width: 100%; min-height: 15rem;
  font: inherit; text-align: center; cursor: pointer;
  color: var(--accent-soft); background: var(--ink);
  border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--accent);
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.slab:active { transform: translate(4px, 4px); box-shadow: 6px 6px 0 var(--accent); }
/* 亮起来那一刻：整块变黄。这是被测量的那个事件本身，不能有过渡动画 —— */
/* 有过渡的话「变黄」就成了一段时间而不是一个时刻，测的就不是反应了。 */
.slab[data-state="go"] { background: var(--accent-soft); color: var(--ink); transition: none; }
.slab[data-state="early"] { background: var(--accent); color: var(--accent-ink); }
.slab[data-state="wait"] { cursor: progress; }
.slab-word { font-size: var(--step-2); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.slab-ms {
  font-size: clamp(3.4rem, 1.6rem + 7vw, 7rem); font-weight: 900; line-height: .9;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap;
}
.slab-ms small { font-size: .28em; letter-spacing: .1em; margin-left: .2em; }

/* ---- 五次成绩：一次一张卡，按顺序排 ------------------------
   排成一条是有意的：第一次几乎总比后面慢，那件事只有并排放着才看得见。 */
.strip { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.trial {
  flex: 1 1 6rem; min-width: 5rem;
  display: grid; gap: var(--sp-1); justify-items: center;
  padding: var(--sp-3) var(--sp-2);
  background: var(--raise); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.trial > b { font-size: var(--step-2); font-weight: 900; font-variant-numeric: tabular-nums; }
.trial > span { font-size: var(--step--1); color: var(--faint);
                text-transform: uppercase; letter-spacing: .1em; }
.trial.pending { background: transparent; box-shadow: none; border-style: dashed; }
.trial.pending > b { color: var(--faint); }
.trial.best > b { color: var(--accent); }
.trial.bad { background: var(--accent); border-color: var(--ink); }
.trial.bad > b, .trial.bad > span { color: var(--accent-ink); }

/* ---- 四格成绩 ---------------------------------------------- */
.score { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.score > div {
  display: grid; gap: var(--sp-1); align-content: start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-soft); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
}
.score > div > b { font-size: var(--step-3); font-weight: 900; line-height: .92;
                   font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.score > div > span { font-size: var(--step--1); color: var(--ink); line-height: 1.35; }

/* ---- 这个数里到底装了什么 ----------------------------------
   把测出来的毫秒拆成「屏幕在等着画」和「剩下的才是你」。
   左边那段是当场用 rAF 量出来的刷新间隔，不是查表来的。 */
.stack { display: grid; gap: var(--sp-2); }
.stack > .bar { display: flex; height: 2.6rem; border: 3px solid var(--ink); background: var(--raise); }
.stack > .bar > i {
  display: grid; place-content: center; min-width: 0;
  /* <i> 默认是斜体，这两段里装的是读数不是强调，得关掉 */
  font-style: normal;
  font-size: var(--step--1); font-weight: 900; font-variant-numeric: tabular-nums;
  overflow: hidden; white-space: nowrap;
}
/* 名字不能叫 .screen —— engine.css 拿 .screen 当分屏容器，
   opacity:0 + visibility:hidden，这里蹭上就整段看不见了。 */
.stack > .bar > i.refresh { background: var(--sink); color: var(--ink); border-right: 3px solid var(--ink); }
.stack > .bar > i.rest { background: var(--accent); color: var(--accent-ink); }
.stack > .key { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
                font-size: var(--step--1); color: var(--muted); }
.stack > .key > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.stack > .key > span::before { content: ""; width: .9rem; height: .9rem; border: 2px solid var(--ink); }
.stack > .key > span.refresh::before { background: var(--sink); }
.stack > .key > span.rest::before { background: var(--accent); }

/* skin.css 里的 .verdict 是落地页那个巨大的分数（描边 + 两层硬投影），
   放一整段话上去就成了一坨糊掉的字。这里把描边和投影明确关掉 —— 不写
   就会从 skin 继承过来，属性没被覆盖是不会自己消失的。 */
.verdict {
  font-size: var(--step-1); font-weight: 700; line-height: 1.45;
  color: var(--ink); max-width: var(--measure);
  -webkit-text-stroke: 0; text-shadow: none;
}

.method { margin: 0; padding-left: 1.3em; display: grid; gap: var(--sp-3); max-width: var(--measure); }
.method li { font-size: var(--step--1); color: var(--muted); line-height: 1.7; }
.method b { color: var(--ink); font-weight: 900; }

/* ============================================================
   /quiz/calibration/ —— 押注尺 + 校准图
   同一个站共用这份 depth.css：反应测试那页是「一块击打面」，
   这一页是「一条押注尺 + 一张对角线图」，纸底硬投影的底子不变。
   ============================================================ */

/* ---- 进度带：十格，答过的当场就染色 --------------------------
   不做成一条空进度条：答完以后这十格自己就是一份成绩摘要，
   往回滚一眼能看出错的是前半还是后半。 */
.tape { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tape i {
  flex: 1 1 2rem; font-style: normal;
  display: grid; place-content: center; padding: var(--sp-2) 0;
  border: 3px solid var(--ink); background: transparent;
  font-size: var(--step--1); font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--faint);
}
.tape i.now { background: var(--ink); color: var(--accent-soft); }
.tape i.hit { background: var(--accent-soft); color: var(--ink); }
.tape i.miss { background: var(--accent); color: var(--accent-ink); }

/* ---- 押注尺 --------------------------------------------------
   六格是一整条标尺，不是两组按钮。两端印着两个选项，中间六格
   从「确定是左边」一路走到「确定是右边」，一次点击同时记下
   选了哪边和有多确定 —— 分成两步问的话，第二步人人都会随手点。 */
.ask {
  display: grid; gap: var(--sp-5);
  padding: var(--sp-5); background: var(--raise);
  border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--accent);
}
.scale { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.end {
  font-size: var(--step-0); font-weight: 900; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .02em;
}
.end.r { text-align: right; }
.cells { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr);
         border: 3px solid var(--ink); }
.cell {
  font: inherit; cursor: pointer; text-align: center;
  display: grid; gap: var(--sp-1); align-content: center;
  padding: var(--sp-4) var(--sp-1); min-height: 5rem;
  border: 0; border-left: 3px solid var(--ink); color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cell:first-child { border-left: 0; }
.cell.a { background: var(--sink); }
.cell.b { background: var(--accent-soft); }
.cell b { font-size: var(--step-1); font-weight: 900; font-variant-numeric: tabular-nums; }
.cell span { font-size: var(--step--1); color: var(--muted); line-height: 1.2; }
.cell:hover, .cell:focus-visible { background: var(--ink); color: var(--accent-soft); }
.cell:hover span, .cell:focus-visible span { color: var(--accent-soft); }
.cell:active { background: var(--accent); color: var(--accent-ink); }
.hint { font-size: var(--step--1); color: var(--faint); }
.done { font-size: var(--step-1); font-weight: 900; }

@media (max-width: 620px) {
  /* 六格并排在手机上每格只剩 50px，百分数会被压成两行。
     折成两行三格，左三右三刚好还是「左边一组、右边一组」。 */
  .cells { grid-template-columns: repeat(3, 1fr); }
  .cell:nth-child(4) { border-left: 0; }
  .cell:nth-child(n+4) { border-top: 3px solid var(--ink); }
}

/* ---- 校准图 --------------------------------------------------
   横轴只到 50% 是因为尺上没有更低的档；纵轴画满 0–100%，
   因为「说了 90% 结果全错」是真的会发生，把纵轴截短就是替读者遮丑。
   点到对角线之间那条虚线不是装饰：它平方加权以后就是可靠度那个数。 */
.curve { margin: 0; border: 3px solid var(--ink); background: var(--raise); padding: var(--sp-4); }
.curve svg { display: block; width: 100%; height: auto; }
.curve .g { stroke: var(--rule); stroke-width: 1; }
.curve .diag { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 9 6; }
.curve .gap { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 4; }
.curve .dot { fill: var(--accent); stroke: var(--ink); stroke-width: 3; }
.curve .ax { fill: var(--faint); font-size: 12px; text-anchor: middle; letter-spacing: .06em; }
.curve .ax.y { text-anchor: end; }
.curve .ax.lab { fill: var(--muted); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.curve .cnt { fill: var(--ink); font-size: 12px; font-weight: 900; text-anchor: middle; }

/* ---- 分解账：运算符要印出来 ----------------------------------
   三个数光摆着，读的人没法验。印成 0.164 − 0.021 + 0.240 = 0.383，
   谁都能当场按一遍计算器 —— 这一页的可信度全押在这一格上。 */
.decomp { display: grid; gap: 0; border-top: 3px solid var(--ink); }
.decomp > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule);
}
.decomp dfn { font-style: normal; font-weight: 900; font-size: var(--step-0); }
.decomp span { grid-column: 1; font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
.decomp b {
  grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font-size: var(--step-2); font-weight: 900; font-variant-numeric: tabular-nums;
}
.decomp .sum { border-bottom: 0; border-top: 3px solid var(--ink); }
.decomp .sum b { color: var(--accent); }

/* ---- 三个对照：按分数从好到差排，你那行标出来 ------------------ */
.rival { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.rival > div {
  display: grid; gap: var(--sp-2); align-content: start;
  padding: var(--sp-4); background: var(--raise);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
}
.rival > div.me { background: var(--accent-soft); box-shadow: 5px 5px 0 var(--accent); }
.rival b { font-size: var(--step-3); font-weight: 900; line-height: .92;
           font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rival dfn { font-style: normal; font-weight: 900; font-size: var(--step-0); line-height: 1.25; }
.rival span { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }

/* ---- 答卷 ----------------------------------------------------
   最后一列是这道题贡献给总分的那个平方，不是对错 —— 十个加起来
   除以十正好是上面那个总分，能自己把表加下来对上。 */
.sheet { width: 100%; border-collapse: collapse; }
.sheet th, .sheet td { padding: var(--sp-3); text-align: left; vertical-align: top;
                       border-bottom: 1px solid var(--rule); }
.sheet thead th {
  border-bottom: 3px solid var(--ink);
  font-size: var(--step--1); font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
}
.sheet .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet td { font-size: var(--step--1); color: var(--muted); }
.sheet td b { display: block; color: var(--ink); font-weight: 900;
              font-size: var(--step-0); margin-bottom: var(--sp-2); }
.sheet td span { display: block; max-width: 34rem; line-height: 1.6; }
.sheet tr.miss td:last-child { background: var(--accent); color: var(--accent-ink); font-weight: 900; }
.sheet tr.hit td:last-child { background: var(--sink); color: var(--ink); font-weight: 900; }

/* ============================================================
   /quiz/memory/ —— 复述框
   黑砖照旧负责「看」，这一块负责「说回来」。做成一张贴在黑砖下面的
   印刷单据：标签 + 一条横线上的输入格 + 一个盖章式按钮。
   输入框用等宽数字并放大字号 —— 用户打完要自己核一遍，小字核不动。
   ============================================================ */
.recall {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3) var(--sp-4);
  align-items: center;
  padding: var(--sp-5); background: var(--raise);
  border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--accent);
}
.recall label {
  grid-column: 1 / -1;
  font-size: var(--step--1); font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.recall input {
  font: inherit; font-size: var(--step-3); font-weight: 900;
  font-variant-numeric: tabular-nums; letter-spacing: .12em;
  width: 100%; min-width: 0; padding: var(--sp-2) var(--sp-3);
  color: var(--ink); background: var(--paper);
  border: 0; border-bottom: 3px solid var(--ink);
  border-radius: 0;   /* iOS 会自己给 input 加圆角，这一版皮肤里没有圆角 */
}
.recall input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.recall button {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--step-0); font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-ink); background: var(--accent);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.recall button:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.recall button:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.recall .hint { grid-column: 1 / -1; }

/* 成绩条上的错题卡要印出正确答案，那串数字比「Correct」长得多，
   .trial > span 默认是大写 + .1em 字距，一串 9 位数直接顶出卡片。 */
.trial > span { font-variant-numeric: tabular-nums; word-break: break-all; }

@media (max-width: 720px) {
  .doc { padding: var(--sp-5) var(--sp-4) var(--sp-6); gap: var(--sp-5); }
  .score { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rival { grid-template-columns: minmax(0, 1fr); }
  .slab { min-height: 12rem; }
}
@media (prefers-reduced-motion: reduce) {
  /* 击打面的高亮不是装饰，是被测量的那个信号，任何情况下都必须瞬间发生。
     这里能关掉的只有按下去那点位移。 */
  .slab:active { transform: none; }
}