/* ladder 屏的 UI：把它变成场景里的石头（SKEUO_DRAFT 4.9）。
 *
 * 变量在 css/stone.css（`--stone-face` / `--stone-deep` / `--stone-seam` /
 * `--stone-lit`），全部挂在 `.view[data-view="ladder"]` 上。
 *
 * 三条判据（从占卜屏那一轮继承，账在 stone.css 开头）：
 *   ① 换底不换语义色
 *   ② 凸出还是凹进决定亮暗
 *   ③ 体是冷的，照在它上面的光才是暖的
 *
 * ⚠️ **作用域一律限定在 `.view[data-view="ladder"]` 之内。**
 * `button` / `input` / `select` 用在每一屏（对战 HUD、结算、弹窗、顶栏），
 * 不限定就会炸到全站——占卜屏那一轮的 `button:hover` 就是这么冒出来
 * 一个盖住整座宫殿的深蓝方块的。
 *
 * ====================================================================
 * 这一屏的光只有一处：**天光**（从龙门里灌下来）。
 * ====================================================================
 *
 * 所以这个文件里每一道迎光边都是 `--stone-lit`（冷白 #bdcad8），而且
 * **一律在上沿**——光从上面来，那不是配色偏好，是这一屏的层位
 * （天梯是这座沉城里最浅的一屏，够得着水面）。
 *
 * 一个具体后果：**下沿永远不许比上沿亮**。凹格的下缘那道极淡的反光是
 * "光打在凹底再弹上来"的那一点点，它必须比上棱暗一个数量级，
 * 否则整块东西读作"从下面被打光"——那这一屏就没有天光了。
 *
 * ---- 为什么圆角收到 2px 而不是切角（clip-path）----
 *
 * 「石头的角是切角或崩口」这句话对，但 `clip-path` 在**祖先**上会裁掉
 * 所有后代（包括 `position: fixed` 的），而这一屏的卡片里装着输入框和
 * 会长出浮层的东西。这和 stone.css 里记着的那条一模一样
 * （带 transform 的祖先会成为 fixed 后代的包含块），是同一类事故。
 * 2px 已经足够把"UI 卡片"那个读法拆掉——8px 是圆角，2px 是石头崩掉的边。
 */

/* ==================== ① 面板 = 龙门下的那块榜 ====================
 *
 * 原来是 `background: #101c30` + `border-radius: 8px` + 一圈 1px 描边:
 * 一张标准 UI 卡片浮在场景上。现在它是**一块立着的石碑**：
 *
 *   上棱   一道迎光（天光在上方，所以上棱最亮）
 *   两侧   往里收一道暗（那是碑的厚度——正面和侧面的交界）
 *   下沿   一道基座 + 一道接地影，影落在背景那几级石阶上
 *
 * ⚠️ **盒子一个像素都没动。** 背景那一层是照着 `data-prop="ladder.card"`
 * 量出来的 border-box 推地平线的（js/main.js 的 measureProps），
 * 所以这里只准改 `background` / `box-shadow` / `border-radius` 这些
 * **不进布局**的属性。padding 一改，地平线就跟着跑。
 * （`border: 0` 会改盒子——所以是 `border-color: transparent`,
 * 那 1px 留在原地，只是不再画出来。）
 */
.view[data-view="ladder"] .card {
  border-radius: 2px;
  border-color: transparent;
  background:
    /* 上棱：迎光的那一道。前 2px 是棱本身，往下 14px 化开成"石头的正面" */
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--stone-lit) 26%, transparent) 0,
      color-mix(in srgb, var(--stone-lit) 7%, transparent) 3px,
      transparent 15px
    ),
    /* 两侧：往里收一道暗 = 碑的厚度。左右各一层，不是一圈描边——
       描边是"贴上去的线"，而这是"正面到侧面的转折"。 */
    linear-gradient(90deg, var(--stone-seam) 0, transparent 11px),
    linear-gradient(270deg, var(--stone-seam) 0, transparent 11px),
    /* 下沿：基座。比面暗两档（deep），这是"它坐在地上"的那一截 */
    linear-gradient(0deg, var(--stone-deep) 0, transparent 18px),
    /* 体：冷的（判据③——只有窄边用 lit） */
    var(--stone-face);
  box-shadow:
    /* 上棱那一根实线。gradient 做不出 1px 的硬棱（会被抗锯齿抹掉） */
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 40%, transparent),
    /* 下沿的暗缝：基座和地面之间那一道 */
    inset 0 -1px 0 var(--stone-seam),
    /* 接地影。**落在背景那几级石阶上**——这是"这块碑有重量"的唯一证据。
       y 偏移 9px、模糊 20px、扩散 -8px：影子比碑窄一点，
       和碑一样宽的影读作"碑浮在一块黑板上"。 */
    0 9px 20px -8px rgba(2, 5, 8, 0.82),
    0 2px 0 -1px var(--stone-seam);
}

/* ---- ⚠️ 三个标签页的碑**一样高** ----
 *
 * 用户报的：「天梯切换这三个会导致场景拉伸」。
 *
 * 台阶最高那级的前棱就画在这块碑的**下沿**（"碑坐在台阶上"，
 * js/render/props/dragonGate.js 的 contentBand，还有一条测试守着
 * 「台阶不许压到卡片上」）。而三个标签的自然高度是 **522 / 243 / 241**
 * ——切一下标签，碑矮 279px，整座台阶就往上抬 279px 来接住它。
 * 实测那是这一屏切标签时最大的一下（中轴亮度平均差 52.3，
 * 另外两个因素分别只有 11.2 和 8.9）。
 *
 * 判据和背景那层是同一条：**一个地方的比例不该取决于这一页有多少字。**
 * 碑是一块石头，它不会因为上面刻的字少了就缩一截。
 *
 * ---- 这两个数是从背景那层抄来的，不许乱改 ----
 *
 * 下沿要落在 `GATE.bandBotF * 视口高` 和 `GATE.bandBotMin` 里大的那个上
 * ——那正是**没量到碑时**背景自己会用的兜底底带。所以"量到了"和
 * "没量到"两条路现在给出同一个答案，台阶的位置从此和内容无关。
 * 改这里之前先看 js/render/props/dragonGate.js 的 GATE：
 * tools/ladderUI.test.js 里有一条测试比着两边的数，对不上会红。
 *
 * 减掉的是碑的上沿位置（顶栏 + 那排标签牌，实测 164~170，和视口无关
 * ——这一条 contentBand 上面那段也记着）。
 *
 * ⚠️ 榜里的行数多到把碑撑过这个高度时，它还是会比另外两个高。
 * 那时候动的是**真的多了内容**，不是"同一块碑忽大忽小"，读法不一样。 */
.view[data-view="ladder"] .tab-panel > .card {
  --ladder-card-top: 167px;
  min-height: max(
    calc(700px - var(--ladder-card-top)),
    calc(62vh - var(--ladder-card-top))
  );
}

/* ==================== ② 那排标签 = 三块小牌 ====================
 *
 * 按钮**仍然要在**：它在语义上是 tablist，读屏器和键盘都靠它
 * （tabs.js 里挂着 aria-selected / tabIndex / 方向键）。
 * 变的只有它长什么样——从一排药丸变成**插在一道石槽里的三块牌**。
 *
 * 选中那块被推出来（凸），未选的平（只有一道暗缝）。判据②的直接落法。
 *
 * 场景里那三件物件（主榜碑 / 我自己那块碑 / 一对石柱）画在
 * js/render/props/dragonGate.js 里，靠 `variant` 知道现在是哪一段。
 * 这里这三块牌是**同一件事的把手**，不是它的替代品。
 */
/* ---- 三块牌：**整套已经提到 style.css 的 `.screen-tabs` 了** ----
 *
 * 这里原来有一整份（凹槽 + 平的未选 + 推出来的选中 + reduced-motion 那条）。
 * 它整套只用 `--stone-*`，而那几个变量本来就是每屏一组——所以它根本不是
 * "天梯的样子"，它是**这个组件的样子**，只是先在这一屏写出来了。
 *
 * 留在这儿的代价是四个屏各写一份（实测当时形状来自四种不同的机制，
 * 渡口那一屏因此一直是药丸）。所以提到基础层去了，这一屏什么都不用写，
 * 拿到的仍然是天梯自己的灯（`--stone-lit: #bdcad8`，天光冷白）。
 *
 * 判据：**一份实现只用房间的变量，那它就属于组件，不属于房间。**
 */


/* ==================== ③ 榜上的一行 = 刻在碑面上的一道槽 ====================
 *
 * ⚠️ **不要斑马纹。** 斑马纹是表格的语言（"这是一份数据"），
 * 而这是**刻在石头上的名次**。一道槽只要两笔：上缘暗（凿口背光）、
 * 下缘一道极淡的反光（凹底把光弹上来）。颠倒过来就成了浮雕。
 *
 * ⚠️ 上缘那道暗 **必须**比下缘那道亮强得多。等强的话读作"一条贴上去的线"
 * ——占卜屏那次 `.name-row` 栽的就是这个（数学没错，凹凸读反了）。
 */
.view[data-view="ladder"] .ladder-row:not(.is-mine) {
  border-radius: 1px;
  border-color: transparent;
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 3px -1px rgba(0, 0, 0, 0.60),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 13%, transparent);
}

.view[data-view="ladder"] .ladder-row:not(.is-mine):hover {
  /* 悬停：槽底被照亮一点（凹进去的东西被光找到），**不是**整行发亮。 */
  background: color-mix(in srgb, var(--stone-face) 62%, var(--stone-deep));
  box-shadow:
    inset 0 2px 3px -1px rgba(0, 0, 0, 0.52),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 22%, transparent);
}

/* ⚠️ **`.is-mine` 一个字都不改。**
 *
 * 判据①：换底不换语义色。"这一行是我"是**信息**（那道品红竖条和粉染
 * 在观战排行榜、鱼谱、天梯三处是同一套语言），不是风格。
 *
 * 而它的原规则是 `.ladder-row.is-mine`（0,2,0），会被上面那条
 * `.view[data-view="ladder"] .ladder-row`（0,3,0）盖掉——所以上面那条
 * 写的是 `:not(.is-mine)`。**用选择器让它躲开，而不是把品红抄一遍再写回来**：
 * 抄一遍就等于把同一个语义色变成了两处来源，下次改颜色只会改到一处。
 *
 * 唯一给它的是收角——那是"这是石头"，和"这一行是我"不冲突。 */
.view[data-view="ladder"] .ladder-row.is-mine { border-radius: 1px; }

/* 战绩那份列表：同一种槽。
   ⚠️ 只写 `background` / `box-shadow` / `border-radius` 这三样,
   **不许写 `border` 简写**——`.lh-row` 的左边那道 3px 是胜/负/平的语义色
   （`.lh-row.win` / `.loss` / `.draw`），一句简写就把它抹了。 */
.view[data-view="ladder"] .lh-row {
  border-radius: 1px;
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 3px -1px rgba(0, 0, 0, 0.60),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 13%, transparent);
}

/* ==================== ④ 空状态 = 一个空着的凹格 ====================
 *
 * 原来是一圈虚线框。虚线框说的是"这里什么都没有"，
 * 而**一个空着的凹格说的是"这里会有东西"**——龛是先凿好的，
 * 供品后放。那正是空状态该说的那句话。
 */
.view[data-view="ladder"] .empty-state {
  border-radius: 2px;
  border-color: transparent;
  border-style: solid;   /* 虚线是 UI 的语言；边框宽度留着（不动盒子） */
  background: var(--stone-deep);
  box-shadow:
    inset 0 3px 7px -2px rgba(0, 0, 0, 0.70),
    inset 0 0 0 1px var(--stone-seam),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 11%, transparent);
}

/* ==================== ⑤ 段位与配额 = 碑面上一个凿出来的龛 ==================== */
.view[data-view="ladder"] .ladder-head {
  border-radius: 2px;
  border-color: transparent;
  background: var(--stone-deep);
  box-shadow:
    inset 0 3px 6px -2px rgba(0, 0, 0, 0.68),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 12%, transparent),
    /* 金的那一圈**留着**：段位是这一屏的身份色（`--sys-ladder`），
       `.tier-rating` 那个数字也是它。换底不换身份。 */
    inset 0 0 0 1px color-mix(in srgb, var(--other) 24%, transparent);
}

/* ==================== ⑥ 控件：按钮凸出，输入框凹进 ====================
 *
 * 判据②。这一段是**这个文件里最容易炸到全站的部分**，所以每一条前面
 * 都钉着 `.view[data-view="ladder"]`——`button` / `input` / `select`
 * 在对战 HUD、结算、弹窗、顶栏各处都有。
 */

/* 凸出：上沿一道 lit + 下方 seam + 接地影。 */
/* ⚠️ `:not(.primary-btn)` 是 2026-08-30 加的：这条通用规则是"这一屏按钮的
   默认材料"，而主行动按钮**自带语义**（它是这一屏要你按的那一颗）。
   和图鉴那次标签页同一条判据：**默认材料只回答"它是什么做的"，
   回答不了"它是不是主角"。** 主行动的样子在 css/stone.css 末尾统一给。 */
.view[data-view="ladder"] .card button:not(.lh-tab):not(.lh-more):not(.es-cta):not(.inline-cta):not(.primary-btn) {
  border-radius: 2px;
  border-color: transparent;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--stone-lit) 12%, transparent) 0,
      transparent 8px
    ),
    var(--stone-face);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 34%, transparent),
    0 1px 0 -0.5px var(--stone-seam),
    0 3px 7px -3px rgba(2, 5, 8, 0.80);
}

.view[data-view="ladder"] .card button:not(.lh-tab):not(.lh-more):not(.es-cta):not(.inline-cta):not(.primary-btn):hover:not(:disabled) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--stone-lit) 20%, transparent) 0,
      transparent 9px
    ),
    color-mix(in srgb, var(--stone-lit) 7%, var(--stone-face));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 48%, transparent),
    0 1px 0 -0.5px var(--stone-seam),
    0 4px 9px -3px rgba(2, 5, 8, 0.80);
}

/* 按下去 = **压回槽里**：上棱那道 lit 换成 inset 影，接地影收掉。
   （`button:active` 的 `translateY(1px)` 是全站的，留着——位移正好对。） */
.view[data-view="ladder"] .card button:not(.lh-tab):not(.lh-more):not(.es-cta):not(.inline-cta):not(.primary-btn):active:not(:disabled) {
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.66),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
}

/* 凹进：上缘 inset 阴影 + 下缘极淡的 lit 反光。 */
.view[data-view="ladder"] input:not([type='checkbox']):not([type='radio']),
.view[data-view="ladder"] select {
  border-radius: 2px;
  border-color: transparent;
  background: var(--stone-deep);
  color: var(--ink);
  box-shadow:
    inset 0 2px 5px -1px rgba(0, 0, 0, 0.68),
    inset 0 0 0 1px var(--stone-seam),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
}

.view[data-view="ladder"] input:not([type='checkbox']):not([type='radio']):focus,
.view[data-view="ladder"] select:focus {
  /* 聚焦：槽底被照亮，**槽还是槽**（不许变成凸出的按钮）。
     `:focus-visible` 那圈 outline 是全站的，不动。 */
  box-shadow:
    inset 0 2px 5px -1px rgba(0, 0, 0, 0.60),
    inset 0 0 0 1px color-mix(in srgb, var(--stone-lit) 26%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 20%, transparent);
}

/* 战绩里那三个筛选（全部 / 我发起的 / 别人来打我的）：和上面那排标签
   同一套语言（凹槽里的小牌），因为它们做的是同一件事。
   ⚠️ `.active` 的金色**留着**：那是这一屏的身份色，不是装饰。 */
.view[data-view="ladder"] .lh-tab {
  border-radius: 1px;
  border-color: transparent;
  background: transparent;
  box-shadow: inset 0 1px 0 var(--stone-seam);
}

.view[data-view="ladder"] .lh-tab:hover:not(.active) {
  background: color-mix(in srgb, var(--stone-face) 55%, transparent);
}

.view[data-view="ladder"] .lh-tab.active {
  background: var(--stone-face);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 46%, transparent),
    0 2px 0 -1px var(--stone-seam),
    inset 0 0 0 1px color-mix(in srgb, var(--other) 40%, transparent);
}

/* "还有 N 场，全部展开"：它是这份列表的延续，不是一个动作
   （style.css 里那段账）。所以它不是一块凸出来的牌，
   是**碑面上一道还没刻满的浅槽**。 */
.view[data-view="ladder"] .lh-more {
  border-radius: 1px;
  border-style: solid;
  border-color: transparent;
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 3px -1px rgba(0, 0, 0, 0.52),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
}

.view[data-view="ladder"] .lh-more:hover {
  background: color-mix(in srgb, var(--stone-face) 58%, var(--stone-deep));
  box-shadow:
    inset 0 2px 3px -1px rgba(0, 0, 0, 0.46),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 18%, transparent);
}