/* ============================================================
   game / hub.css  —  聚合首页专用（/game/）
   ------------------------------------------------------------
   版式取终端目录列表：等宽、一行列头、真实路径当序号、零圆角零阴影。
   独门装置就是那行列头 —— 全等宽的皮肤才能让下面的行真的对齐成表，
   另外四个聚合页一个都做不到。

   和另外四页的硬区别（别写串）：
     quiz    实心块 + 硬投影 + hover 位移
     fortune 罗马数字 + 发丝刻线 + 零色块
     anime   空心描边数字 + 2px 实黑线 + 一处玫红满灌
     body    暗面板 + 超大读数 + 负荷条，靠留白
     这里    列头行 + 路径序号 + 键值对，密不留白

   命名全部带 brd- 前缀。game/skin.css 已经占了 .board .bar .bar-r
   .caret .cta-row .fine .go .hero-title .lede .live .more .n .pick
   .picks .screen .sec-title .small .specs .up .verdict .dn .js .css
   —— 一个都不能碰。
   ============================================================ */

.brd {
  max-width: 76rem;
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  display: grid;
  gap: var(--sp-6);
}

/* ---- 报头 ------------------------------------------------- */
.brd-top { display: grid; gap: var(--sp-3); }

.brd-kicker {
  margin: 0;
  display: flex; align-items: center; gap: .5em;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.brd-kicker .icon { width: 1.1em; height: 1.1em; color: var(--accent); }

.brd-h1 {
  margin: 0;
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.brd-h1 em { font-style: normal; color: var(--accent); }

.brd-lede { margin: 0; max-width: var(--measure); color: var(--muted); }

/* ---- 分节标题：终端提示符那一路，前面挂一个 ▸ ------------- */
.brd-h2 {
  margin: 0 0 var(--sp-4);
  display: flex; align-items: center; gap: .5em;
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.brd-h2::before { content: '\203A'; color: var(--accent); font-weight: 700; }
.brd-h2 .icon { width: 1.05em; height: 1.05em; color: var(--accent-soft); }

/* .brd-part 把标题和它下面的东西锁进同一节：.brd 是 grid，
   直接子元素之间会吃一次 gap，标题再带 margin 就离得太远。 */
.brd-part { display: block; }

/* ---- 键值对（主推块和目录行共用）---------------------------
   in / time / out 三个键宽度写死 5ch，等宽字体下值自然成一竖列。
   这就是这一页的「表」：不画线，靠字宽对齐。 */
.brd-cell { display: flex; align-items: baseline; gap: .75em; }
.brd-k {
  flex: 0 0 5ch;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.brd-v { flex: 1 1 auto; min-width: 0; color: var(--muted); }
.brd-v b { font-weight: 700; color: var(--accent); }

/* ---- 主推位：一块抬高的面板，左边一条琥珀竖条 -------------- */
.brd-main {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--raise);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) ease, border-color var(--dur) ease;
}
.brd-main:hover { background: var(--sink); border-color: var(--rule) var(--accent-soft) var(--accent-soft) var(--accent); }
.brd-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.brd-main-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--rule);
  font-size: var(--step--1);
}
/* 路径当序号：投放要按 URL 分层，首页先把 URL 结构摆出来。 */
.brd-main-id, .brd-id {
  color: var(--accent-soft);
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color var(--dur) ease;
}
.brd-main-tag {
  margin-left: auto;
  padding: .1em .6em;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brd-main-body { display: grid; gap: var(--sp-3); }
.brd-main-name {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.brd-main-what { max-width: var(--measure); color: var(--muted); }

.brd-main-spec { display: grid; gap: var(--sp-2); font-size: var(--step--1); }

.brd-main-go {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .6em;
  padding: var(--sp-2) var(--sp-5);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: filter var(--dur) ease;
}
.brd-main-go .icon { width: 1.1em; height: 1.1em; }
.brd-main:hover .brd-main-go { filter: brightness(1.15); }

/* ---- 目录表：列头 + 两行 ------------------------------------
   列头和行共用同一套 grid-template-columns，第一列写死 9ch，
   否则 auto 各算各的，列头对不上行。 */
.brd-head, .brd-row > a {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-3);
}
.brd-head {
  border-bottom: 1px solid var(--accent-soft);
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
/* 窄屏只有两列，第三个列头没地方放，也没信息量。 */
.brd-head > span:nth-child(3) { display: none; }

.brd-list { list-style: none; margin: 0; padding: 0; }
.brd-row + .brd-row { border-top: 1px solid var(--rule); }

.brd-row > a {
  align-items: start;
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) ease;
}
/* hover 不位移、不长边线：整行点亮，路径变琥珀 —— 终端里选中一行
   就是这个样子。 */
.brd-row > a:hover, .brd-row > a:focus-visible { background: var(--raise); }
.brd-row > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.brd-row > a:hover .brd-id, .brd-row > a:focus-visible .brd-id { color: var(--accent); }

.brd-row-main { display: grid; gap: var(--sp-2); }
.brd-row-name {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.brd-row-what { max-width: var(--measure); color: var(--muted); font-size: var(--step-0); }

.brd-row-spec { grid-column: 2; display: grid; gap: var(--sp-2); font-size: var(--step--1); }

/* 箭头只在宽屏出现（那里才有独立的一列）。 */
.brd-go { display: none; width: 1.1em; height: 1.1em; color: var(--faint); transition: color var(--dur) ease; }
.brd-row > a:hover .brd-go { color: var(--accent); }

/* ---- 延伸阅读：两栏，无路径号，和上面的目录表分得开 -------- */
.brd-reads { display: grid; gap: var(--sp-5); }
.brd-read {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--raise);
  border: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) ease;
}
.brd-read:hover { border-color: var(--accent-soft); }
.brd-read:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brd-read-name {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.brd-read-what { color: var(--muted); font-size: var(--step--1); }
.brd-read-go {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.brd-read-go .icon { width: 1.1em; height: 1.1em; }

/* ---- 说明段 ----------------------------------------------- */
.brd-notes { display: grid; gap: var(--sp-4); }
.brd-note {
  padding-left: var(--sp-4);
  border-left: 1px solid var(--rule);
}
.brd-note h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--accent-soft);
}
.brd-note p { margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.6; }
.brd-note a { color: var(--accent); text-underline-offset: 3px; }

/* ---- 宽屏：正文栏被 --measure 锁住，右边不能整列空着 --------
   规格立成右列、列头跟着长出第三格、报头分两栏、阅读和说明各两栏。
   上一版 quiz 就栽在「断言全过、构建全绿、右边空一半」。 */
@media (min-width: 64rem) {
  .brd-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--sp-6); align-items: end; }
  .brd-kicker { grid-column: 1 / -1; }
  .brd-lede { padding-left: var(--sp-4); border-left: 1px solid var(--accent-soft); }

  .brd-main { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: var(--sp-6); padding: var(--sp-5); }
  .brd-main-head { grid-column: 1 / -1; }
  .brd-main-body { grid-column: 1; }
  /* 规格列靠上排紧，按钮压住这一列的底边 —— 右列只有四条读数会在
     下面空掉一大块。虚线分隔是这一页专用，实线是 body 那页的。 */
  .brd-main-spec {
    grid-column: 2; grid-row: 2;
    align-content: start;
    gap: var(--sp-3);
    padding-left: var(--sp-5);
    border-left: 1px dashed var(--faint);
  }
  .brd-main-go {
    grid-column: 2; grid-row: 3;
    align-self: end;
    justify-self: stretch;
    justify-content: center;
  }

  .brd-head, .brd-row > a { grid-template-columns: 9ch minmax(0, 1fr) 20rem auto; }
  .brd-head > span:nth-child(3) { display: block; }
  .brd-row-spec {
    grid-column: 3; grid-row: 1;
    align-self: start;
    padding-left: var(--sp-4);
    border-left: 1px dashed var(--faint);
  }
  .brd-go { display: block; grid-column: 4; grid-row: 1; align-self: center; }

  .brd-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  /* 两篇的标题行数不一样，正文起点就会错开一行。subgrid 让两栏共用
     同一套行高，标题 / 正文 /「读它」三条基线各自对齐。 */
  @supports (grid-template-rows: subgrid) {
    .brd-reads { grid-template-rows: auto; }
    .brd-read { grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  }
  .brd-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}

/* ---- 窄屏 ------------------------------------------------- */
@media (max-width: 40rem) {
  .brd { padding: var(--sp-4) var(--sp-4) var(--sp-6); gap: var(--sp-5); }

  /* 主推块必须留在首屏里：买量进来的人第一眼要看见能点的东西。 */
  .brd-main { padding: var(--sp-4); }
  .brd-main-name { font-size: var(--step-2); }
  .brd-main-go { justify-self: stretch; justify-content: center; }

  .brd-head, .brd-row > a { grid-template-columns: 8ch minmax(0, 1fr); padding-inline: 0; }
  .brd-k { flex-basis: 4.5ch; }
}

/* 这一页的动效只有颜色和底色，本来就没有位移，关掉过渡即可，
   静态版面完全不变。 */
@media (prefers-reduced-motion: reduce) {
  .brd-main, .brd-main-go, .brd-row > a, .brd-id, .brd-go, .brd-read { transition: none; }
}