/* ============================================================
   pick.css  —  /game/pick/ 结果屏五节的样式
   ------------------------------------------------------------
   只给这一页用，类名统一 gp- 前缀。理由是 fortune/dreams 那次踩过的坑：
   往共用皮肤里加没前缀的通用类，会把同站别的页面一起改掉。

   不要 link game/depth.css —— pick 是投放落地页，只带 skin.css，
   depth.css 第 8 行注释写明了这件事：落地页用不到深度页那些类，
   塞进去等于让每个落地访客白下载一份。

   版式跟着 skin.css 的终端语言：1px 细线、零圆角、全等宽、
   琥珀只给「现在」的读数、钢青只给序号和结构线。移动优先，390px 不横滚。
   全站唯一一处琥珀满铺留给 §1 的分差判词，别处一律细线。
   ============================================================ */

/* ---- 小节外框：1px 钢青，跟 .sec-title.small 一个调。
   不用 anime 那边的 6px 黑线 —— 这个站从头到尾只有发丝线，
   粗线一上来就跟 .board 的密度打架。 ---- */
.gp-sec {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--accent-soft);
}
.gp-lede { color: var(--muted); font-size: var(--step--1); line-height: 1.62; margin: 0; }
.gp-note { color: var(--faint); font-size: var(--step--1); line-height: 1.6; margin: 0; }

/* 小标题：跟 .sec-title.small 同号同字距，但换成行首提示符而不是上边框
   —— 上边框已经被 .gp-sec 占了，再来一条就是两条平行线。 */
.gp-sub {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: var(--sp-3) 0 0;
}
.gp-sub::before { content: '>'; color: var(--accent); }

/* ---- 表体：上下各一条线收口，行间不留缝 ---- */
.gp-tbl {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ---- 通用行：序号 / 正文 / 读数，条占满整行 ---- */
.gp-row {
  display: grid;
  grid-template-columns: 3.2ch minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
.gp-row:last-child { border-bottom: 0; }
.gp-row .gp-ord  { grid-column: 1; }
.gp-row .gp-nm   { grid-column: 2; }
.gp-row .gp-val  { grid-column: 3; }
.gp-row .gp-bar  { grid-column: 2 / -1; }
.gp-row .gp-sm   { grid-column: 2 / -1; }

.gp-ord { color: var(--accent-soft); font-size: var(--step--1); }
.gp-nm {
  font-weight: 700;
  letter-spacing: -.02em;
  /* anywhere 而不是 break-word：只有 anywhere 会把最小内容宽度降到单字符，
     auto 轨道才肯收窄。The Binding of Isaac: Rebirth 这种长名在 390px 下
     会把整行顶宽、整页横滚；break-word 修不了，它不改 min-content。 */
  overflow-wrap: anywhere;
}
.gp-val {
  color: var(--accent);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gp-sm { color: var(--muted); font-size: var(--step--1); line-height: 1.55; }
.gp-sm b { color: var(--ink); }

/* ---- 条：高度必须是定值。父格子 baseline 对齐，
   百分比高度在这种格子里算不出来，会塌成 0。 ---- */
.gp-bar {
  display: block;
  height: 8px;
  background: var(--sink);
  border: 1px solid var(--rule);
}
.gp-bar i {
  display: block;
  height: 100%;
  width: calc(var(--_n) * 1%);
  background: var(--accent);
}
/* 保底 2px 只给非零值。零值也画一格的话，画面在断言数据没说的东西
   —— 得 0 分的候选应该真的什么都没有。 */
.gp-bar i[data-z] { width: 0; }
.gp-bar i:not([data-z]) { min-width: 2px; }
/* 钢青条：§4 用它标「没进榜的那四款」，琥珀留给上了榜的那一款；
   §5 整节比的都是榜上别人的读数，跟读者按了什么无关，所以全用钢青。
   琥珀只给跟读者直接相关的量（§1 的分数、§3 的锁定进度）。 */
.gp-bar.alt i { background: var(--accent-soft); }

/* ---- 你那一行：站里的悬停语言（--sink 底 + 行首提示符），
   加一道琥珀内嵌左边线。不用满铺琥珀 —— 五节里每节都有「你那行」，
   满铺会变成五条尖叫的横幅。满铺只留给 §1 的判词一处。 ---- */
.gp-row[data-me] {
  background: var(--sink);
  box-shadow: inset 3px 0 0 var(--accent);
  position: relative;
}
.gp-row[data-me] .gp-ord { color: var(--accent); }
.gp-row[data-me] .gp-nm::after {
  content: '  <- you';
  color: var(--accent);
  font-weight: 400;
  white-space: pre;
}

/* ---- §1 的分差判词：全页唯一一处琥珀满铺 ---- */
.gp-call {
  margin: 0;
  padding: var(--sp-4);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-0);
  line-height: 1.5;
}
.gp-call b { color: var(--accent-ink); }
.gp-call em { font-style: normal; text-decoration: underline; text-underline-offset: .22em; }

/* ---- §1 你按的那四下：仿 .pick 的三列终端记录，但不可点 ---- */
.gp-ans {
  display: grid;
  /* 标签列跟着最长的那条走，不写定宽。11ch 装得下 11 个字符，但 .gp-q 有
     .14em 字距，"Q01 SESSION" 实际要 13ch 出头 —— 定宽的结果是四行里
     两行折行两行不折，参差得像出了 bug。 */
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
.gp-ans:last-child { border-bottom: 0; }
.gp-q {
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.gp-pick {
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-soft);
  overflow-wrap: anywhere;
}
.gp-ans[data-skipped] .gp-pick { color: var(--warn); }
.gp-ans .gp-sm { grid-column: 1 / -1; }

/* ---- §1 一键之差：改哪一个答案会换结果 ---- */
.gp-swap {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
.gp-swap:last-child { border-bottom: 0; }
.gp-swap[data-moved] .gp-sm { color: var(--accent); }
.gp-swap[data-moved] .gp-sm b { color: var(--accent); }

/* ---- 路径药丸：§2 讲四路平局那几条路时用 ----
   390px 下四个标签一定各占一行，中间的 + 就吊在行尾像打错字。
   窄屏改竖排并隐掉 +，宽到放得下一行时再让它回来当连接符。 */
.gp-path {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
.gp-path:last-child { border-bottom: 0; }
.gp-path u { display: none; text-decoration: none; color: var(--faint); font-weight: 700; }
.gp-path i {
  font-style: normal;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent-soft);
  padding: 2px var(--sp-3);
  border: 1px solid var(--rule);
}
.gp-path em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
  font-size: var(--step--1);
}
@media (min-width: 34em) {
  .gp-path { display: flex; flex-wrap: wrap; align-items: center; }
  .gp-path u { display: inline; }
}

/* ---- 窄屏收紧：360px 以下把两列结构压成一列 ---- */
@media (max-width: 22.5em) {
  .gp-ans, .gp-swap { grid-template-columns: minmax(0, 1fr); }
  .gp-row { grid-template-columns: 2.6ch minmax(0, 1fr) auto; }
}

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