/* ============================================================
   game / drops.css  —  /game/drops/ 专用
   ------------------------------------------------------------
   这一页自带：三格设置条、一个 --step-5 的百分比读数、一张累积曲线。
   其余（.strip .cost .method .more .measure）全部复用 skin/depth。
   全部 drp- 前缀；SVG 里的类关在 .drp-curve 下面，不外泄。
   设置条和 /game/lag/ 是同一套造型，故意的 —— 同一个站里两页
   「填几个数读一个数」的工具，长得不一样只会让人以为走错了地方。
   ============================================================ */

/* ---- 设置条 -------------------------------------------------- */
.drp-set {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--rule); background: var(--raise);
}
.drp-f {
  display: grid; gap: var(--sp-2); align-content: start;
  padding: var(--sp-3); border-left: 1px solid var(--rule); min-width: 0;
}
.drp-f:first-child { border-left: 0; }
.drp-f > span {
  font-size: var(--step--1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
/* 390 上三格平分不到 120px，--step-2 的 "4096" 会把下拉箭头挤出去 */
.drp-f input, .drp-f select {
  font: inherit; font-size: var(--step-1); line-height: 1.15;
  width: 100%; min-width: 0;
  background: var(--paper); color: var(--accent);
  border: 1px solid var(--faint); border-radius: 0;
  padding: var(--sp-2) var(--sp-2);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease);
}
/* select 在 Windows 上默认套一层系统外观，等宽字和琥珀色都进不去 */
.drp-f select { appearance: none; padding-right: var(--sp-5); cursor: pointer; }
.drp-f-one { position: relative; }
.drp-f-one::after {
  content: '\25BE'; position: absolute; right: calc(var(--sp-3) + var(--sp-2));
  bottom: calc(var(--sp-3) + var(--sp-2)); color: var(--accent-soft);
  pointer-events: none; font-size: var(--step--1);
}
.drp-f input:focus-visible, .drp-f select:focus-visible {
  outline: 0; border-color: var(--accent);
}
@media (min-width: 600px) {
  .drp-f { padding: var(--sp-4); }
  .drp-f input, .drp-f select { font-size: var(--step-2); padding: var(--sp-2) var(--sp-3); }
  .drp-f-one::after {
    right: calc(var(--sp-4) + var(--sp-3)); bottom: calc(var(--sp-4) + var(--sp-2));
    font-size: var(--step-0);
  }
}

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

/* ---- 累积曲线 ------------------------------------------------
   SVG 里的 font-size 走用户坐标不是屏幕像素：viewBox 900 宽的图在 390 上
   只铺 366px，缩放 0.41 —— 写 15 出来是 6px，手机读不出来。窄屏写 26～30
   （≈11～12px），600 以上图变宽了再收回去。跟 /game/lag/ 同一条账。 */
.drp-curve { margin: var(--sp-5) 0 var(--sp-4); }
.drp-curve svg { display: block; width: 100%; height: auto; }
.drp-curve .grid { stroke: var(--rule); stroke-width: 1; }
.drp-curve .axis { stroke: var(--faint); stroke-width: 1.5; }
.drp-curve .fill { fill: var(--sink); }
.drp-curve .ln { fill: none; stroke: var(--accent); stroke-width: 4; }
.drp-curve .half { stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 8 8; }
/* 你所在的那一刻：竖线 + 点，压在曲线之上（曲线 stroke 4，盖得住 1.5 的线） */
.drp-curve .me { stroke: #58e0d8; stroke-width: 2; }
.drp-curve .dot { fill: #58e0d8; }
.drp-curve .num { fill: var(--muted); font-size: 26px; text-anchor: middle; }
.drp-curve .num.s { text-anchor: start; }
.drp-curve .num.e { text-anchor: end; }
.drp-curve .lab { fill: var(--ink); font-size: 28px; letter-spacing: .04em; }
.drp-curve .lab.me { fill: #58e0d8; stroke: none; }
.drp-curve .lab.soft { fill: var(--muted); }
@media (min-width: 600px) {
  .drp-curve .num { font-size: 16px; }
  .drp-curve .lab { font-size: 17px; }
}

/* ---- 表 ------------------------------------------------------
   depth.css:466 的 `.cost.words .c-n` 把数字列写死了 nowrap，(0,3,0)
   压过 depth.css:475 给表头开的换行，连表头一起管到了：390 上
   「Added since above」这类词组会把表顶出容器，而 body 是
   overflow-x:hidden，顶出去那截横拖也拖不回来。这里只放开表头，
   选择器必须凑够 (0,4,2) 才压得过去 —— 少一个类都不生效。 */
@media (max-width: 40rem) {
  .cost.words.drp-tab thead th.c-n { white-space: normal; }
}
.drp-tab tbody th { color: var(--ink); }
.drp-tab .c-run { color: var(--accent); }
.drp-tab .c-nil { color: var(--muted); }
.drp-tab tr.you { background: var(--raise); }
.drp-tab tr.you th::before { content: '> '; color: var(--accent); }
/* 无记忆那张表：三行的中间一列必须逐字相同，所以整列涂成同一个颜色，
   让「一样」是看出来的而不是读出来的。 */
.drp-mem tbody td.c-n { color: var(--accent); }