/* ============================================================
   game / sens.css  —  /game/sens/ 专用
   ------------------------------------------------------------
   这一页自带三件东西：三格设置条、一个 --step-5 的 cm/360 读数、
   一张按比例画的鼠标垫尺子。其余（.strip .cost .jumps .method
   .more .measure）全部复用 skin/depth，不重写。
   全部 sens- 前缀；SVG 里的 pad- 类都关在 .sens-pad 下面。
   ============================================================ */

/* ---- 设置条：跟下面那条 .strip 用同一套边框和底色，读起来是一家人 ---- */
.sens-set {
  display: grid; grid-template-columns: minmax(0, 1fr) 10rem 10rem;
  border: 1px solid var(--rule); background: var(--raise);
}
.sens-f {
  display: grid; gap: var(--sp-2); align-content: start;
  padding: var(--sp-4); border-left: 1px solid var(--rule); min-width: 0;
}
.sens-f:first-child { border-left: 0; }
.sens-f > span {
  font-size: var(--step--1); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.sens-f input, .sens-f select {
  font: inherit; font-size: var(--step-2); line-height: 1.15;
  width: 100%; min-width: 0;          /* 不给 fit-content：会悄悄溢出压到旁边那格 */
  background: var(--paper); color: var(--accent);
  border: 1px solid var(--faint); border-radius: 0;
  padding: var(--sp-2) var(--sp-3);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease);
}
/* select 在 Windows 上默认给自己套一层系统外观，等宽字和琥珀色都进不去 */
.sens-f select { appearance: none; padding-right: var(--sp-5); cursor: pointer; }
.sens-f-game { position: relative; }
.sens-f-game::after {
  content: '\25BE'; position: absolute; right: calc(var(--sp-4) + var(--sp-3));
  bottom: calc(var(--sp-4) + var(--sp-2)); color: var(--accent-soft);
  pointer-events: none; font-size: var(--step-0);
}
.sens-f input:focus-visible, .sens-f select:focus-visible {
  outline: 0; border-color: var(--accent);
}

/* ---- 主读数：整页最大的东西 ---------------------------------- */
.sens-hero {
  display: grid; gap: var(--sp-2);
  border-left: 3px solid var(--accent); padding-left: var(--sp-5);
}
/* 必须是直接子元素：.sens-why 那段话里也有 <b> 放动态数字，
   写成 .sens-hero b 会把半句正文顶成 --step-5。 */
.sens-hero > b {
  font-size: var(--step-5); font-weight: 400; line-height: .88;
  letter-spacing: -.05em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sens-hero > span {
  font-size: var(--step--1); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.sens-why {
  max-width: var(--measure); font-size: var(--step--1);
  color: var(--muted); line-height: 1.6; margin-top: var(--sp-2);
}
.sens-why b, .sens-said b { color: var(--accent); font-weight: 400; }
.sens-said em { font-style: normal; color: var(--ink); }

/* ---- 换算表 --------------------------------------------------
   不复用 .hundred：那张表钉表头、一百行，套过来会让人以为翻回
   /game/charts/ 去了。这里只有十三行，表头不钉。 */
.sens-tab {
  width: 100%; border-collapse: collapse; font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.sens-tab th, .sens-tab td {
  text-align: right; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.sens-tab th:first-child, .sens-tab td:first-child {
  padding-left: 0; text-align: left; white-space: normal;
}
.sens-tab thead th {
  color: var(--muted); font-weight: 400; vertical-align: bottom;
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent-soft);
}
.sens-tab tbody tr { transition: background var(--dur) var(--ease); }
.sens-tab tbody tr:hover { background: var(--raise); }
.sens-tab .g { color: var(--ink); }
.sens-tab .y { color: var(--muted); }
/* 答案列：琥珀，比别的列大一档 —— 整张表就是为了这一列 */
.sens-tab .s { color: var(--accent); font-size: var(--step-0); }
.sens-tab .e, .sens-tab .w { color: var(--muted); }
/* 你自己那一行：终端提示符 + 底色，不靠边框（border-collapse 下 tr 边框不可靠） */
.sens-tab tr.you { background: var(--raise); }
.sens-tab tr.you .g::before { content: '> '; color: var(--accent); }
.sens-tab tr.you .s { color: var(--accent-soft); }

/* ---- 垫子尺子 ------------------------------------------------
   和 .twin 同一套外框，这个站的图都长这样。 */
.sens-pad {
  margin: 0; border: 1px solid var(--rule); background: var(--raise);
  padding: var(--sp-4);
}
.sens-pad svg { display: block; width: 100%; height: auto; }
.sens-pad .pad-mat { fill: var(--sink); stroke: var(--faint); stroke-width: 1; }
.sens-pad .pad-tick { stroke: var(--faint); stroke-width: 1; }
.sens-pad .pad-num { fill: var(--muted); font-size: 13px; text-anchor: middle; }
/* 一次挥动：垫子上画得下的那一段是琥珀，超出去的那一段换成描边 ——
   超出去的距离是真的不存在的，不能画成实心让人以为也有 */
.sens-pad .pad-swipe { fill: var(--accent); }
.sens-pad .pad-over { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.sens-pad .pad-lift { stroke: var(--neg); stroke-width: 2; }
.sens-pad .pad-lab { fill: var(--ink); font-size: 14px; letter-spacing: .1em; }
.sens-pad .pad-lab.off { fill: var(--accent); text-anchor: end; }
.sens-pad .pad-cap {
  fill: var(--muted); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ---- 垫子尺寸按钮：depth.css 的 .jumps 没有选中态 ------------- */
.sens-pads button.on {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}

/* 每档转多少：cm 那一列是这张表的答案，跟主读数同一个色 */
.sens-turns .c-cm { color: var(--accent); }
.sens-turns tbody th { color: var(--ink); }

@media (max-width: 720px) {
  /* 手机上留三列：游戏、yaw、填多少。eDPI 和「不换算会怎样」两列
     藏掉 —— 后者的结论由表下面那句现算的话补上，不靠这一列。 */
  .sens-tab .sens-drop { display: none; }
  .sens-set { grid-template-columns: 1fr 1fr; }
  .sens-f-game { grid-column: 1 / -1; }
  .sens-f-dpi { border-left: 0; border-top: 1px solid var(--rule); }
  .sens-f-sens { border-top: 1px solid var(--rule); }
}
@media (max-width: 480px) {
  .sens-tab th, .sens-tab td { padding: var(--sp-2); }
  .sens-tab thead th { white-space: normal; letter-spacing: .06em; }
  .sens-hero { padding-left: var(--sp-4); }
}