/* ============================================================
   trivia.css  —  /quiz/trivia/ 结果屏五节的样式
   ------------------------------------------------------------
   只给这一页用，类名统一 tv- 前缀。往 quiz/skin.css 里加没前缀的
   通用类会把同站另外八个页面一起改掉（fortune/dreams 那次的坑）。

   照抄这个站已有的印刷语言，不另起一套：3px 纯黑描边、零圆角、
   实心无模糊的硬投影、正红 --accent 只给「结论」、铬黄 --accent-soft
   给「强调」、正文压在 --raise 的白卡上。移动优先，390px 不横滚。

   红色在这一屏是稀缺的：.verdict 的双层投影和抢答器已经占掉两处，
   五节里红只用在「答错了」和条形图的填充上，别的一律黑白加黄。
   ============================================================ */

/* ---- 节：整节用一条粗黑线跟上一节断开 ---- */
.tv-sec {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 3px solid var(--ink);
}

/* 节标题：黑板条压白字。跟 .eyebrow（歪着的黄贴纸）和 .q-title
   （白底大黑字 + 红色反白词）都不一样，三种一眼分得开。
   不转角度 —— 歪的小贴纸是招牌，五条歪的横幅只是没对齐。 */
.tv-sub {
  justify-self: start;
  font-size: var(--step-1);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--paper);
  background: var(--ink);
  padding: var(--sp-2) var(--sp-5);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--accent-soft);
}

.tv-lede {
  max-width: var(--measure);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.62;
  color: var(--muted);
}
.tv-lede b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tv-lede a { color: var(--ink); text-underline-offset: 3px; }

.tv-note {
  max-width: var(--measure);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted);
}
.tv-note b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 一节最多一句「重话」：铬黄满铺压黑字。
   红色留给 .verdict 和抢答器，这里再来一块红就是三处抢眼。 */
.tv-call {
  margin: 0;
  max-width: var(--measure);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--step-1);
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
  background: var(--accent-soft);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.tv-call b { font-variant-numeric: tabular-nums; }
.tv-call em {
  font-style: normal;
  background: var(--ink);
  color: var(--accent-soft);
  padding: 0 .22em;
}

/* ---- §1 答案回看：一题一张印刷卡 ---------------------------- */
.tv-card {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--raise);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.tv-card + .tv-card { margin-top: var(--sp-5); }

/* 卡头：题号方块 + 类别 + 判定章。允许换行，390px 上三块排不下一行。 */
.tv-ch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.tv-cn {
  font-size: var(--step--1);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  background: var(--ink);
  padding: .15em .5em;
}
.tv-cc {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
/* 判定章：对/错/跳过三种。绿和红是 tokens 里语义固定的信号色，
   这里正是它们的用途，不算给这个站多开一种品牌色。 */
.tv-cv {
  margin-left: auto;
  font-size: var(--step--1);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .15em .55em;
  border: 2px solid currentColor;
}
.tv-card[data-hit]  .tv-cv { color: var(--pos); }
.tv-card[data-miss] .tv-cv { color: var(--neg); }
.tv-card[data-skip] .tv-cv { color: var(--faint); }

.tv-cq {
  font-size: var(--step-0);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}

/* 你选的 / 正解。两行标签列对齐，标签不折行。 */
.tv-cp {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  font-size: var(--step--1);
  font-weight: 700;
}
.tv-cp dt {
  white-space: nowrap;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  font-size: var(--step--1);
}
.tv-cp dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); }
.tv-cp dd[data-wrong] { color: var(--neg); text-decoration: line-through; }
/* 荧光笔画在内层 inline 元素上。挂在 dd 上会铺满整个网格列 ——
   格子是拉伸的，短答案也会拖出一条到右边缘的黄杠。
   用 linear-gradient 而不是 box-shadow：inline 元素的背景本来就
   按行片段各画一次，答案折行时黄杠跟着折。 */
.tv-cp dd[data-sol] b {
  font-weight: inherit;
  background: linear-gradient(transparent 64%, var(--accent-soft) 64%);
}

.tv-cw {
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--ink);
}

/* ---- §2 §3 §4 §5 共用的数据行 -------------------------------
   一行三格：名字 / 读数 / 条。条独占第二行铺满，390px 上
   三样并排会把名字挤成每行两个字。 */
.tv-tbl {
  display: grid;
  gap: 0;
  border: 3px solid var(--ink);
  background: var(--raise);
}
.tv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink);
}
.tv-row:last-child { border-bottom: 0; }
.tv-nm { font-weight: 800; overflow-wrap: anywhere; }
.tv-vl {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.tv-bar { grid-column: 1 / -1; }
.tv-sm {
  grid-column: 1 / -1;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}
.tv-sm b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 条：高度必须是定值。父格子按基线对齐，百分比高度在这种格子里
   算不出参照，会塌成 0（/game/pick/ 上踩过）。 */
.tv-bar {
  display: block;
  height: 10px;
  background: var(--sink);
  border: 2px solid var(--ink);
}
.tv-bar i {
  display: block;
  height: 100%;
  width: calc(var(--_n) * 1%);
  background: var(--accent);
}
/* 2px 保底只给非零值：零也画一格等于在断言数据没说的事
   —— 全选 D 是 0 分，那一条就该是空的。 */
.tv-bar i[data-z] { width: 0; }
.tv-bar i:not([data-z]) { min-width: 2px; }
/* 铬黄条：用在「这不是你、是参照物」的量上（乱点分布、档位宽度）。
   正红留给跟读者本人直接相关的读数。 */
.tv-bar.alt i { background: var(--accent-soft); }

/* 你那一行：整行铺黄 + 左侧一道粗黑。不用红满铺 ——
   五节各有一行「你」，五条红横幅会跟 .verdict 打架。 */
.tv-row[data-me] {
  background: var(--accent-soft);
  box-shadow: inset 5px 0 0 var(--ink);
}
.tv-row[data-me] .tv-nm::after {
  /* 纯 ASCII。U+25C0 这类几何符号在 iOS 上会被拉成彩色 emoji 字形，
     全站不出 emoji。 */
  content: '  <- you';
  font-weight: 900;
  white-space: pre;
}
/* 高亮行上的条要换色：底已经是黄的，黄条会消失。
   槽也换成白，--sink 压在黄上是一团浑的。 */
.tv-row[data-me] .tv-bar { background: var(--raise); }
.tv-row[data-me] .tv-bar.alt i { background: var(--ink); }

/* §3 的分布有十一行，用密排，不然光这一节就三屏 */
.tv-tbl.dense .tv-row { padding: var(--sp-2) var(--sp-4); }
.tv-tbl.dense .tv-bar { height: 8px; }

/* ---- 窄屏：360px 以下把「你选的 / 正解」压成一列 ---- */
@media (max-width: 22.5em) {
  .tv-cp { grid-template-columns: minmax(0, 1fr); }
  .tv-cp dd { margin-bottom: var(--sp-2); }
  .tv-card { padding: var(--sp-3); }
  .tv-row { padding: var(--sp-3) var(--sp-3); }
}

/* ---- 宽屏：读数列定宽，数字右缘排成一条线 ---- */
@media (min-width: 42em) {
  .tv-sec { gap: var(--sp-5); }
  .tv-row { grid-template-columns: minmax(0, 1fr) 11rem; }
}

/* 减弱动效时把条的过渡一并关掉。条本身没有 transition，
   这里只保证将来加了也不会漏网。 */
@media (prefers-reduced-motion: reduce) {
  .tv-bar i { transition: none; }
}