/* ═════════════════════════════════════════════
   RUVO · ev.html（開封期待値ランキング）／sets.html（弾別 BOX 一覧）手机扫尾（T24，≤767、外壳挂上后，2026-10-12）
   版式不重排，只保证：390／360 宽没有横向溢出、宽表格在可横滑容器里并在右端渐隐提示、正文与小字不低于 13px、可点件不小于 44×44。
   只在 html.m-shell 里生效（≥768 一像素不变）。颜色只用 token（旧变量由 ruvo-c.css 1'' 节映射），三套配色 × 浅深自动成立。
   ═════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* ── 小字：旧页面里 9〜12.5px 的字，手机上都到 13 ── */
  html.m-shell .page-lead .pl-kicker, html.m-shell .ev-ref-note, html.m-shell .ev-foot-note, html.m-shell .sets-note, html.m-shell .sets-foot-note,
  html.m-shell .ev-src-tag, html.m-shell .ev-chip, html.m-shell .ev-card .nums .k, html.m-shell .ev-card .cov, html.m-shell .ev-card .nums .sub,
  html.m-shell .vt th, html.m-shell .vt th *, html.m-shell .vt .sub, html.m-shell .vt .cov, html.m-shell .block-label .hint, html.m-shell .foot, html.m-shell .foot div { font-size: 13px; }
  html.m-shell .ev-src-tag, html.m-shell .ev-chip { line-height: 20px; padding: 3px 9px; }
  html.m-shell .vt th[data-sort-key] .arrow { font-size: 13px; }
  html.m-shell .page-lead p { font-size: 14px; line-height: 1.7; }

  /* ── 可点件 44 ── */
  html.m-shell .ev-toolbar .chips button { min-height: 44px; padding-left: 16px; padding-right: 16px; }
  html.m-shell .ev-toolbar { gap: 8px 12px; }
  html.m-shell input#ev-q.ev-search { height: 44px !important; min-height: 44px !important; box-sizing: border-box; font-size: 14px; flex-basis: 100%; }
  html.m-shell .vt th[data-sort-key] button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px; white-space: nowrap; }
  html.m-shell .vt td a.nm { display: flex; align-items: center; min-height: 44px; }
  html.m-shell .foot a { display: inline-flex; align-items: center; min-height: 44px; }
  html.m-shell .block-label .hint a, html.m-shell .sets-foot-note a, html.m-shell .ev-foot-note a, html.m-shell .ev-ref-note a { display: inline-flex; align-items: center; min-height: 44px; }
  html.m-shell .ev-card { min-height: 44px; }

  /* ── 横溢出（360 宽で 6px はみ出していた右端の「EV ÷ BOX」）：札の 3 列を詰め、各セルを縮められるように ── */
  html.m-shell .ev-card .body, html.m-shell .ev-card .nums > * { min-width: 0; }
  html.m-shell .ev-card .nm-row { min-width: 0; }
  html.m-shell .ev-card .nums .k { white-space: normal; }
}
@media (max-width: 400px) {
  html.m-shell .ev-card { grid-template-columns: 20px 80px minmax(0, 1fr); gap: 12px; padding: 16px 14px; }
  html.m-shell .ev-card .shot { width: 80px; height: 80px; padding: 6px; }
  html.m-shell .ev-card .nums .ratio .v { font-size: 20px; }
  /* 360 宽: 二つの金額が並ぶと「BOX 価／格」と折れ、「¥11,400¥14,365」とくっつく → 金額を一行ずつ、ラベル左・金額右にする */
  html.m-shell .ev-card .nums { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  html.m-shell .ev-card .nums > span:not(.ratio) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 28px; }
  html.m-shell .ev-card .nums > span:not(.ratio) .k { flex: 1 1 auto; min-width: 0; }
  html.m-shell .ev-card .nums > span:not(.ratio) .v { flex: none; white-space: nowrap; text-align: right; }
}

/* ── 宽表格：横滑容器 + 右端渐隐提示（旧い min-width は各 html のページ内 style が持つ）。尾部に 32px の余白を足し、最後の列は渐隐の外まで滑らせられる ── */
@media (max-width: 767px) {
  html.m-shell .ev-all-scroll, html.m-shell .sets-era-scroll {
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, var(--text-1) calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, var(--text-1) calc(100% - 28px), transparent);
  }
  html.m-shell .ev-all-scroll::-webkit-scrollbar, html.m-shell .sets-era-scroll::-webkit-scrollbar { display: none; }
  html.m-shell .ev-all-scroll table.vt, html.m-shell .sets-era-scroll table.vt { margin-right: 32px; }
  html.m-shell .ev-all-scroll .vt th:first-child, html.m-shell .ev-all-scroll .vt td:first-child,
  html.m-shell .sets-era-scroll .vt th:first-child, html.m-shell .sets-era-scroll .vt td:first-child { box-shadow: 1px 0 0 var(--line); }
  /* 固定の第 1 列（サムネ＋弾名）が画面の 8 割を占めて、横に滑らせても数字の列が見えなかった。190px に絞り、名前は折り返す */
  html.m-shell .ev-all-scroll .vt :is(th, td):first-child, html.m-shell .sets-era-scroll .vt :is(th, td):first-child { width: 190px; min-width: 190px; max-width: 190px; white-space: normal; }
  html.m-shell .ev-all-scroll .vt .pair, html.m-shell .sets-era-scroll .vt .pair { gap: 10px; }
  html.m-shell .ev-all-scroll .vt a.nm, html.m-shell .sets-era-scroll .vt a.nm { white-space: normal; -webkit-line-clamp: unset; line-height: 1.4; }
}
@media (prefers-reduced-transparency: reduce) {
  html.m-shell .ev-all-scroll, html.m-shell .sets-era-scroll { -webkit-mask-image: none; mask-image: none; }
}