/* ============================================================
   game. 皮肤  —  数据终端（冷藏青黑 + 琥珀 + 钢青）
   ------------------------------------------------------------
   和 body（另一个深色站）的三条硬区别，别写串：
     冷蓝黑 vs 暖炭黑 / 全等宽 vs DIN 几何 / 密集表格 vs 稀疏读数
   和其余三站的区别：这个站没有圆角、没有卡片阴影、没有留白，
   信息密度本身就是它的视觉主张。

   只重新赋值 tokens.css 已有变量名；--_ 前缀是局部参数，不属于契约。
   ============================================================ */

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --paper: #080c14;        /* 冷藏青黑，带蓝，不带暖 */
  --raise: #0e1420;
  --sink:  #141c2b;

  --ink:   #d8e4f0;
  --muted: #7f93ad;
  --faint: #4d6180;

  --accent:      #ffb020;  /* 琥珀：所有「现在」的读数 */
  --accent-ink:  #0a0f18;
  --accent-soft: #38d0c8;  /* 钢青：结构线、序号、第二主色 */

  --pos: #45d67a; --neg: #ff5f56; --warn: #ffb020;
  --rule: #1e2a3d;

  --radius-s: 0; --radius-m: 0; --radius-l: 0;
  --dur: 220ms; --dur-slow: 700ms;

  /* 全站等宽：这是唯一一个连正文都不用比例字体的站 */
  --font-body:    ui-monospace, "Cascadia Mono", Consolas, "SF Mono", "Menlo", monospace;
  --font-display: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", "Menlo", monospace;
  --measure: 58ch;
}

body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(56,208,200,.10), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

/* 扫描线：整屏固定叠加层，不拦点击。这是这个站的动效签名。
   周期给到 4px、透明度压到 .16 —— 再重一点，1x 屏上小号等宽字会被切糊。 */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.16) 0 1px, transparent 1px 4px);
}
/* 一道极慢的亮带从上往下扫，CRT 刷新的暗示 */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: linear-gradient(180deg, transparent 0 42%,
    rgba(56,208,200,.055) 47%, transparent 52% 100%);
  animation: crt 7s linear infinite;
}
@keyframes crt { from { transform: translateY(-100%) } to { transform: translateY(100%) } }

/* 闪烁光标：只在标题末尾出现一个方块 */
.caret {
  display: inline-block; width: .52em; height: .84em;
  margin-left: .12em; vertical-align: -.04em;
  background: var(--accent); animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0 } }

/* ---- 顶部状态条：每屏一条，像终端的窗口标题栏 ---------------- */
.bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  align-items: center;
  padding: var(--sp-2) 0;
  border-block: 1px solid var(--rule);
  font-size: var(--step--1); letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.bar-r { margin-left: auto; color: var(--accent-soft); }
.live { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink); }
.live i {
  width: 7px; height: 7px; background: var(--pos);
  animation: blink 1.6s steps(1) infinite;
}

/* ---- 标题：等宽大字，紧字距，不居中 ------------------------- */
.hero-title {
  font-size: var(--step-3); font-weight: 700;
  line-height: 1.02; letter-spacing: -.045em;
}
.lede { color: var(--muted); font-size: var(--step-0); line-height: 1.62; }
.sec-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--step-2); font-weight: 700;
  line-height: 1.08; letter-spacing: -.035em;
}
.sec-title.small {
  font-size: var(--step--1); font-weight: 500; color: var(--accent-soft);
  letter-spacing: .18em; text-transform: uppercase;
  padding-top: var(--sp-4); border-top: 1px solid var(--rule);
}

/* ---- 榜单：这个站的主体。列线保留，行距压紧，密度就是主张。---- */
.board {
  width: 100%; border-collapse: collapse;
  font-size: var(--step--1); font-variant-numeric: tabular-nums;
}
.board th, .board td {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.board td:nth-child(2) { white-space: normal; }   /* 只有标题列允许换行 */
.board thead th {
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); border-bottom-color: var(--accent-soft);
}
.board tbody th {
  width: 3ch; color: var(--accent-soft); font-weight: 400;
  padding-left: 0; position: relative;
}
/* 悬停时行首长出一个提示符，鼠标在哪一行一眼看得到 */
.board tbody th::before {
  content: '>'; position: absolute; left: -.9ch;
  color: var(--accent); opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.board tbody tr { transition: background var(--dur) var(--ease); }
.board tbody tr:hover { background: var(--sink); }
.board tbody tr:hover th::before { opacity: 1; }
.board .n { text-align: right; }
.board tbody td.n:nth-child(3) { color: var(--accent); }
.board .up { color: var(--pos); }
.board .dn { color: var(--neg); }
@media (max-width: 640px) {
  .board th:nth-child(4), .board td:nth-child(4) { display: none; }
  .board th, .board td { padding: var(--sp-2) var(--sp-2); }
}

/* ---- 主按钮：终端里的方括号，悬停整块反白 -------------------- */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.go {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font: inherit; font-size: var(--step-0); font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent); background: transparent;
  border: 1px solid var(--accent); border-radius: 0;
  padding: var(--sp-3) var(--sp-5);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.go:hover {
  color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 22px rgba(255,176,32,.28);
}
.go:active { box-shadow: none; }
.fine { font-size: var(--step--1); color: var(--faint); }

/* ---- 选项：不是卡片，是四行终端记录 -------------------------- */
.picks { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.picks .pick {
  display: grid; align-items: baseline; gap: var(--sp-2) var(--sp-4);
  grid-template-columns: 11ch minmax(0, 1fr) auto;
  text-align: left; color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4);
  position: relative;
  transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.pick::before {
  content: '>'; position: absolute; left: var(--sp-2); top: var(--sp-3);
  color: var(--accent); opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.pick b { color: var(--accent-soft); font-weight: 700; letter-spacing: .04em; }
.pick span { color: var(--muted); font-size: var(--step--1); }
.pick i {
  font-style: normal; font-size: var(--step--1); color: var(--faint);
}
.pick:hover { background: var(--raise); padding-left: var(--sp-5); }
.pick:hover::before { opacity: 1; }
.pick:hover b { color: var(--accent); }
@media (max-width: 560px) {
  .picks .pick { grid-template-columns: minmax(0, 1fr) auto; }
  .pick span { grid-column: 1 / -1; }
}

/* ---- 结果屏 ------------------------------------------------ */
/* 五个结果块，score.js 只留一块。必须是 .screen 的直接子元素，
   否则拿不到上面那套整屏刷入的入场动画。 */
[data-result] { display: grid; gap: var(--sp-5); }

.verdict {
  font-size: var(--step-4); font-weight: 700;
  line-height: .96; letter-spacing: -.055em; color: var(--accent);
}

/* 键值表：点线引导，终端台账的样子 */
.specs {
  margin: 0; display: grid; gap: 0; max-width: 34rem;
  border-top: 1px solid var(--rule);
}
.specs > div {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
}
.specs dt { color: var(--faint); letter-spacing: .12em; text-transform: uppercase; }
.specs dd { margin: 0 0 0 auto; color: var(--accent); }

/* 结果屏没有图形。
   Steam 免费接口只给「此刻在线」这一个瞬时值，没有历史曲线；
   拿它跟榜首比会把一个 3 千人的合作游戏画成空条，说的是真话但传达的是假印象。
   宁可只留 .specs 那几行硬数字，也不画一张误导人的图。 */

.ad {
  background: transparent; border: 1px solid var(--rule);
  border-top: 1px solid var(--accent-soft);
  color: var(--faint); letter-spacing: .2em; text-transform: uppercase;
}

/* 交叉导航：四行终端条目，悬停整行反白 */
.more { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.more a {
  display: grid; gap: var(--sp-1); grid-template-columns: 1fr auto;
  align-items: baseline; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.more a::after {
  content: '->'; grid-column: 2; grid-row: 1 / span 2;
  align-self: center; color: var(--accent-soft);
}
.more b { font-weight: 700; font-size: var(--step-0); letter-spacing: -.02em; }
.more span { font-size: var(--step--1); color: var(--muted); }
.more a:hover { background: var(--accent); color: var(--accent-ink); }
.more a:hover span, .more a:hover::after { color: var(--accent-ink); }

.back {
  align-self: start; font: inherit; font-size: var(--step--1);
  color: var(--muted); background: transparent; border: 0;
  letter-spacing: .14em; text-transform: uppercase; padding: var(--sp-2) 0;
  transition: color var(--dur) var(--ease);
}
.back:hover { color: var(--accent); }

/* ---- 入场：整屏从左侧打字机式刷出 --------------------------
   fill 一律 backwards，动画结束把属性还给 CSS，
   否则 .pick / .go 的悬停位移会被终态顶掉。
   延迟选择器必须带上 .screen[data-active]，特异度不能输给上面那条简写，
   否则简写隐含的 animation-delay:0s 会把错峰压成同时出现。 */
.screen[data-active] > * { animation: type .45s var(--ease) backwards; }
.screen[data-active] > :nth-child(2) { animation-delay: .06s }
.screen[data-active] > :nth-child(3) { animation-delay: .12s }
.screen[data-active] > :nth-child(n+4) { animation-delay: .18s }
@keyframes type {
  from { opacity: 0; clip-path: inset(0 100% 0 0) }
  to   { opacity: 1; clip-path: inset(0) }
}

.screen[data-active] .board tbody tr { animation: type .34s var(--ease) backwards; }
.screen[data-active] .board tbody tr:nth-child(1)  { animation-delay: .26s }
.screen[data-active] .board tbody tr:nth-child(2)  { animation-delay: .31s }
.screen[data-active] .board tbody tr:nth-child(3)  { animation-delay: .36s }
.screen[data-active] .board tbody tr:nth-child(4)  { animation-delay: .41s }
.screen[data-active] .board tbody tr:nth-child(5)  { animation-delay: .46s }
.screen[data-active] .board tbody tr:nth-child(6)  { animation-delay: .51s }
.screen[data-active] .board tbody tr:nth-child(7)  { animation-delay: .56s }
.screen[data-active] .board tbody tr:nth-child(8)  { animation-delay: .61s }
.screen[data-active] .board tbody tr:nth-child(9)  { animation-delay: .66s }
.screen[data-active] .board tbody tr:nth-child(10) { animation-delay: .71s }

@media (prefers-reduced-motion: reduce) {
  body::after, .caret, .live i { animation: none; }
  .screen[data-active] > *, .screen[data-active] .board tbody tr { animation: none; }
}