/* ============================================================
   game / depth.css  —  深度页专用
   ------------------------------------------------------------
   落地页是分屏的；深度页是一整块可以翻的表。和 fortune 的深度页
   刻意长得不一样：那边是历书（衬线、留白、居中），这边是终端
   （等宽、零圆角、密、行贴行、表头钉住）。

   不塞进 skin.css：落地页用不到这些类，塞进去等于让每个落地访客
   白下载一段样式，而落地率是整条漏斗最贵的一段。
   配色和字体全部继承 skin.css，不重定义任何 token。
   ============================================================ */

/* 顶栏：左边回去，右边构建时间。做成一条状态行，不是导航条。 */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
}
.top a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--muted); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.top a:hover { color: var(--accent); }
/* --faint (#4d6180) 对 --paper 只有 3.1:1，对 --raise 只有 2.9:1，
   两个都不到 4.5。凡是要读的字一律 --muted (#7f93ad, 5.9~6.2:1)，
   占位符也算要读的字；--faint 只留给描边和分隔线。 */
.top .clock { color: var(--muted); }
.top .clock b { color: var(--accent-soft); font-weight: 400; }

/* 表比 fortune 的正文宽得多：七列 × 一百行，62rem 会挤成一团 */
.doc {
  max-width: 76rem; margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: grid; gap: var(--sp-6);
  /* grid 子项默认 min-width:auto，一张 nowrap 的宽表会把整条轨道顶宽，
     然后 .head/.strip/.ad 全跟着变宽 —— 正文段落在手机上被右侧裁掉，
     而 body 是 overflow-x:hidden，裁了还不能滚，等于内容直接没了。
     minmax(0,1fr) 把轨道钉死在容器宽度上：宽表只撑自己，不牵连正文。 */
  grid-template-columns: minmax(0, 1fr);
}
.head { display: grid; gap: var(--sp-4); justify-items: start; }

/* 眼眉标签：这个站的 skin.css 没定义 .eyebrow（首页用的是别的标记），
   深度页要用就在这里定义，不去动 skin —— skin 是五个站各自的皮，
   为了一个深度页往里加规则，等于让首页跟着改。 */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--rule); background: var(--raise);
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.eyebrow .icon { width: 1em; height: 1em; color: var(--accent); }

.lede { max-width: var(--measure); font-size: var(--step-1); color: var(--muted); }
.block { display: grid; gap: var(--sp-4); }

/* ---- 摘要条：四个真数，用竖线隔开 --------------------------
   不做成卡片。这个站的视觉主张就是密度，一给圆角和投影就变成另一个站了。 */
.strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule); background: var(--raise);
}
.strip div {
  padding: var(--sp-4); border-left: 1px solid var(--rule);
  display: grid; gap: var(--sp-1); align-content: start;
}
.strip div:first-child { border-left: 0; }
.strip b {
  font-size: var(--step-3); font-weight: 400; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.strip span { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
@media (max-width: 720px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip div:nth-child(3) { border-left: 0; }
  .strip div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ---- 工具条：搜名字 + 当前排序说明 -------------------------- */
.tools {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding-bottom: var(--sp-3);
}
.tools input {
  font: inherit; font-size: var(--step--1);
  background: var(--raise); color: var(--ink);
  border: 1px solid var(--rule); padding: var(--sp-2) var(--sp-3);
  min-width: 16rem; flex: 1 1 16rem;
  transition: border-color var(--dur) var(--ease);
}
.tools input::placeholder { color: var(--muted); }
.tools input:focus-visible { outline: 0; border-color: var(--accent-soft); }
.tools .said {
  font-size: var(--step--1); color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase;
}
.tools .said b { color: var(--accent-soft); font-weight: 400; }

/* ---- 一百行 ------------------------------------------------
   没有横滚容器：overflow 会把 sticky 表头钉在容器上而不是视口上，
   一滚就跟着跑没了。窄屏改成藏掉两列（见文件末尾），不让表横滚。 */
.hundred { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.hundred th, .hundred td {
  text-align: right; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.hundred th:first-child, .hundred td:first-child { padding-left: 0; }
.hundred .title { text-align: left; white-space: normal; color: var(--ink); }

/* 表头钉在视口顶端 —— 翻到第 80 行还得知道哪一列是哪一列 */
.hundred thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper); color: var(--muted);
  font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent-soft);
}
/* 可点的表头就是个按钮，别用 div 加 onclick —— 键盘要能走到 */
.hundred thead button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  transition: color var(--dur) var(--ease);
}
.hundred thead button:hover { color: var(--ink); }
.hundred thead button::after { content: ''; color: var(--accent); }
.hundred th[aria-sort] button { color: var(--accent); }
.hundred th[aria-sort="descending"] button::after { content: '\25BE'; }
.hundred th[aria-sort="ascending"] button::after { content: '\25B4'; }

.hundred tbody tr { transition: background var(--dur) var(--ease); }
.hundred tbody tr:hover { background: var(--raise); }
.hundred tbody tr[hidden] { display: none; }
.hundred .n { font-variant-numeric: tabular-nums; }
/* 名次列压暗一档靠的是 --muted，不是 --faint：--faint 对 --paper 只有 3.1:1。
   压暗的效果还在（正文是 --ink，比它亮一档），但这一列是能读的了。
   注意这条比 .hundred thead th 特异度高，表头那一格也归它管。 */
.hundred .rk { color: var(--muted); }
.hundred .live { color: var(--accent); }        /* 琥珀 = 此刻的读数，全站统一 */
.hundred .up { color: var(--pos); }
.hundred .dn { color: var(--neg); }
.hundred .flat { color: var(--muted); }

/* 占位条：此刻在线 ÷ 本周峰值。条本身就是这一列的数，不额外配图例。
   条用 flex:1 吃掉整格剩下的宽，不给固定宽度 —— 这一列是整页的论点之一，
   固定 4rem 会在宽屏上把条挤成一小截，格子左边空出一大片。 */
.hundred .fill { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; }
.hundred .fill span { width: 3.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.hundred .fill i {
  display: block; flex: 1; min-width: 3rem; max-width: 14rem;
  height: 6px; background: var(--sink);
}
.hundred .fill i b { display: block; height: 100%; width: var(--_w); background: var(--accent-soft); }

/* 峰值序位这一列是整页的论点：跟第一列差得越远，两张榜分歧越大 */
.hundred .gap b { font-weight: 400; }
.hundred .gap small { color: var(--muted); font-size: 1em; }

/* 搜出来一个都没有的时候得说话，不能只剩一张空表 */
.empty { padding: var(--sp-5) 0; color: var(--muted); }
.empty[hidden] { display: none; }

/* ---- 方法：把每个数从哪来摆出来，这是这一页可信度的来源 ------ */
.method { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-2); }
.method li { font-size: var(--step--1); color: var(--muted); line-height: 1.65; }
.method b { color: var(--ink); font-weight: 400; }

@media (max-width: 720px) {
  /* 藏掉上周变化和本周峰值：名次、此刻、占比、峰值序位才是这页在说的事 */
  .hundred .wk, .hundred .pk { display: none; }
  .doc { padding: var(--sp-5) var(--sp-4) var(--sp-6); gap: var(--sp-5); }
  .hundred .fill i { min-width: 2rem; max-width: 4rem; }
}

/* 手机：藏两列之后还差 130px 才塞得进 390。剩下的四列一列都不能再藏
   —— 名次、此刻在线、占峰值、峰值序位，正好是这页的论点。所以改成
   压格距 + 让标题断行，把宽度挤出来，不再靠裁。 */
@media (max-width: 480px) {
  /* 390 宽的手机，两边各留 16px 太奢侈了：这一页的主角是一张五列的表，
     边距让出来的每一像素都直接变成表格的列宽。 */
  .doc { padding-inline: var(--sp-3); }
  .hundred th, .hundred td { padding: var(--sp-2); }
  /* 表头是最宽的一批字：PLAYING NOW 十一个等宽字母还带 .14em 字距，
     光这一列的表头就要 118px。手机上让表头折行、字距收窄，
     省下来的宽度全给标题列 —— 数字列的表头不该比数字本身宽。 */
  .hundred thead th { white-space: normal; letter-spacing: .06em; }
  /* 标题列是唯一可伸缩的一列。anywhere 让超长单词（BATTLEGROUNDS）
     能断开，不再把整列顶到 120px；但光有 anywhere 会让 min-content
     掉到一个字符，几个 nowrap 的数字列会把宽度全抢走，标题就被压成
     一行一个字母。min-width 是那个下限，两条必须一起写。 */
  .hundred .title { overflow-wrap: anywhere; min-width: 5.75rem; }
  .hundred .fill { gap: var(--sp-1); }
  .hundred .fill span { width: 2.5rem; }
  .hundred .fill i { min-width: 1.1rem; max-width: 2.5rem; }
  /* 摘要条第一格是「此刻多少人在线」，七位数带千分位是九个字符。
     step-3 在 390 宽下正好顶到中缝上，降一档才留得住内边距。 */
  .strip b { font-size: var(--step-2); }
}

/* ============================================================
   /game/rank/ —— 名次不是一把等距的梯子
   同一个站共用这份 depth.css：/game/charts/ 是「一百行可排序的表」，
   这一页是「两条并排的梯子 + 一个数字输入框」。
   终端那套（等宽、零圆角、硬线、琥珀=此刻的读数）原样继承，
   不新增任何 token。
   ============================================================ */

/* ---- 双梯图 -------------------------------------------------
   左轨按名次等距排，右轨按真实峰值人数排，中间一根线连同一个游戏。
   整张图就是一句话：左边匀，右边不匀。所以刻度一根都不能省，
   也不能把右轨裁到「有数据的那一段」—— 裁了那九十根就不挤了，
   而它们挤在一起正是这一页要讲的事。 */
.twin {
  margin: 0; border: 1px solid var(--rule); background: var(--raise);
  padding: var(--sp-4);
}
.twin svg { display: block; width: 100%; height: auto; }
.twin .rail { stroke: var(--faint); stroke-width: 1; }
.twin .rung { stroke: var(--muted); stroke-width: 1; }
/* 连线：九十根压在一起的时候，不透明的线会糊成一整块。
   压到 .3 让密度还能看出层次，前十根换琥珀提到最上面。 */
.twin .tie { stroke: var(--accent-soft); stroke-width: 1; opacity: .3; }
.twin .tie.hi { stroke: var(--accent); opacity: .9; }
.twin .rung.hi { stroke: var(--accent); stroke-width: 2; }
/* 底下那一团的底色。只罩右轨那 60px 宽，不碰连线区，
   不然一块半透明矩形压在九十根线上，本来就糊的地方更糊。 */
.twin .clump { fill: var(--sink); stroke: var(--accent-soft); stroke-width: 1; }
.twin .cap { fill: var(--muted); font-size: 14px; letter-spacing: .14em; text-anchor: middle; }
.twin .val { fill: var(--accent); font-size: 14px; }
.twin .ord { fill: var(--muted); font-size: 14px; text-anchor: end; }

/* ---- 输入框：这一页唯一的动词 ------------------------------
   /game/charts/ 的动词是排序和过滤，这里是「打一个数进去」。
   同一个站两个深度页要是都在点表头，等于同一页做了两遍。 */
.probe {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-4);
  align-items: center;
  border: 1px solid var(--rule); background: var(--raise); padding: var(--sp-4);
}
.probe label {
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.probe input {
  font: inherit; font-size: var(--step-2); line-height: 1.1;
  width: 100%; min-width: 0;          /* 不给 fit-content：会悄悄溢出压到标签上 */
  background: var(--paper); color: var(--accent);
  border: 1px solid var(--faint); padding: var(--sp-2) var(--sp-3);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease);
}
.probe input:focus-visible { outline: 0; border-color: var(--accent); }
.probe .hint { grid-column: 1 / -1; margin: 0; font-size: var(--step--1); color: var(--muted); }

.jumps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.jumps > span {
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.jumps button {
  font: inherit; font-size: var(--step--1); cursor: pointer;
  color: var(--accent-soft); background: none;
  border: 1px solid var(--rule); padding: var(--sp-2) var(--sp-3);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.jumps button:hover, .jumps button:focus-visible { color: var(--accent); border-color: var(--accent); }

/* ---- 三格读数 ----------------------------------------------
   .strip 是页面顶上那条静态摘要，这三格是跟着输入框变的读数，
   所以刻意不复用 .strip：同一个站里静态数和活数得看得出来不一样。 */
.landed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.landed > div {
  display: grid; gap: var(--sp-2); align-content: start;
  background: var(--raise); border-top: 1px solid var(--rule);
  /* 上留白要把规线的粗细补回去：强调那格的规线是 3px，别的格是 1px。
     不补的话那一格的内容整体往下掉 2px，三格并排就看得出来没对齐。 */
  padding: calc(var(--sp-4) + 2px) var(--sp-4) var(--sp-4);
}
.landed > div.hit { border-top: 3px solid var(--accent); padding-top: var(--sp-4); }
/* 必须写成直接子元素：说明句里也有 <b>（要越过谁、前后各几个），
   一条 .landed b 会把那些行内强调一起放大到大数字的字号，
   长一点的游戏名当场撑破格子挤到旁边那格上去。 */
.landed > div > b {
  font-size: var(--step-3); font-weight: 400; line-height: 1;
  color: var(--accent-soft); font-variant-numeric: tabular-nums;
}
.landed > div.hit > b { color: var(--accent); }
/* 说明句里的强调只换颜色，字号跟着正文走 */
.landed span b { color: var(--ink); font-weight: 700; }
.landed dfn {
  font-style: normal; font-size: var(--step--1); color: var(--ink);
  letter-spacing: .12em; text-transform: uppercase;
}
.landed span { font-size: var(--step--1); color: var(--muted); line-height: 1.55; }

/* ---- 上下邻居：你插进去之后周围站着谁 ----------------------- */
.nbrs { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.nbrs li {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--sp-3);
  align-items: baseline; padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  /* 每一行都留着这条 3px 的边，只有"你那行"给它上色 —— 只给那一行加边框
     会把它整体推右 3px，五行里唯独一行的三列对不齐，看着像渲染坏了。 */
  border-left: 3px solid transparent;
}
.nbrs .p { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.nbrs .g { color: var(--ink); overflow-wrap: anywhere; }
.nbrs .v { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 你那一行：整行换琥珀 + 左边一道实边，不靠背景色区分 ——
   这个站的底色只差一档，换背景等于没换。 */
.nbrs li.you { border-left-color: var(--accent); background: var(--raise); }
.nbrs li.you .p, .nbrs li.you .g, .nbrs li.you .v { color: var(--accent); }

/* ---- 四段的单价表 ------------------------------------------
   不复用 .hundred：那张表是一百行的主角，这里只有四行，
   套上钉住的表头和一样的行距会让人以为又翻到那一页去了。 */
.cost { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.cost th, .cost td {
  padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--rule);
  text-align: left; white-space: nowrap;
}
.cost th:first-child, .cost td:first-child { padding-left: 0; }
.cost thead th {
  color: var(--muted); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent-soft);
}
.cost .c-n { text-align: right; font-variant-numeric: tabular-nums; }
.cost tbody th { color: var(--accent-soft); font-weight: 400; }
.cost tbody td { color: var(--ink); }
/* 最贵的那一段用琥珀点出来 —— 表里四行，全灰的话得逐行比数字 */
.cost tr.dear th, .cost tr.dear td { color: var(--accent); }

/* ---- 同一张表，格子里装的是句子不是数字 ---------------------
   .cost 的单元格写死了 nowrap：/game/rank/ 那四行全是数字，
   不换行才对得齐。/game/genres/ 和 /game/free/ 借这张表装整句话，
   nowrap 会把表撑到 600px 宽，整页跟着横滚（390 实测 scrollW=607）。
   所以加一个显式的 .words 解开换行 —— 只有点名的表才换，
   rank 页一个字都不用改。数字列仍旧 nowrap，「40 once」不该断成两行。 */
.cost.words th, .cost.words td { white-space: normal; }
.cost.words .c-n { white-space: nowrap; }
.cost.words tbody th { min-width: 5.5rem; }

@media (max-width: 720px) {
  .probe { grid-template-columns: minmax(0, 1fr); }
  .landed { grid-template-columns: minmax(0, 1fr); }
  /* 窄屏上五列排不下。省掉「跨了几名」和「对比最便宜那段」两列：
     一段值多少人、一名值多少人才是这张表在说的事。 */
  .cost .c-drop { display: none; }
}