/* 历史走势 · 方案A「终端」 (boards A3-History-PC / A3-History-M). Every selector is scoped under .pg-history. */

.pg-history .h-page { gap: 14px; padding-top: 18px; }

/* ---------- Head ---------- */
.pg-history .h-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title right" "sub right";
  align-items: end; gap: 4px 16px;
}
.pg-history .h-title { grid-area: title; font-size: var(--fs-2xl); font-weight: 700; line-height: 1.25; }
.pg-history .h-sub { grid-area: sub; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.pg-history .h-hi { color: var(--text); }
.pg-history .h-game-m { grid-area: game; display: none; }
.pg-history .h-head-r { grid-area: right; display: flex; align-items: center; gap: 16px; font-size: var(--fs-sm); padding-bottom: 2px; }
.pg-history .h-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pg-history .h-live .cd { font-size: 14px; }
.pg-history .h-back { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Real-data mode: the game is sample data (「示例数据」 tag beside the title + one-line note) */
.pg-history .h-sample { margin-left: 10px; vertical-align: middle; border-style: dashed; color: var(--text-2); font-weight: 400; }
.pg-history .h-sample-note {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 1px dashed var(--line-2); border-radius: var(--r-2); background: var(--panel-3);
  font-size: 12px; line-height: 1.5; color: var(--text-2);
}
.pg-history .h-sample-note .ico { width: 14px; height: 14px; flex: none; color: var(--text-3); }
/* Real 虎牙 results: 「实时数据」 tag (as on the 九法专区 card) + a solid note saying from when the record exists */
.pg-history .h-real { margin-left: 10px; vertical-align: middle; font-weight: 400; }
.pg-history .h-real-note { border-style: solid; border-color: rgba(47, 217, 143, .3); }
.pg-history .h-real-note .ico { color: var(--live); }
.pg-history .h-real-note b { font-weight: 500; color: var(--text); }
/* 「部分数据」: the range starts before the real record (or has long stretches without results) */
.pg-history .h-cover {
  display: flex; align-items: flex-start; gap: 6px; padding: 8px 12px;
  border: 1px solid var(--accent-line); border-radius: var(--r-2); background: rgba(245, 165, 36, .06);
  font-size: 12px; line-height: 1.6; color: var(--text-2);
}
.pg-history .h-cover .ico { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--accent); }
.pg-history .h-cover b { font-weight: 600; color: var(--accent); }
.pg-history .h-cover .mono { color: var(--text); }
/* platform beside the game name (PC title); 其他平台 · 待确认 dashed */
.pg-history .h-plat { margin-left: 10px; vertical-align: middle; font-weight: 400; }
.pg-history .h-plat.is-tbd { border-style: dashed; }
/* KPI names longer than 3 characters (布达拉广场, [宠物3] …) step down so the count stays visible */
.pg-history .h-kpis .kpi-v .h-nm.is-long { font-size: 15px; }

/* ---------- Filters ---------- */
.pg-history .h-filters { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; }
.pg-history .h-frow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; min-width: 0; }
.pg-history .h-flabel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pg-history .h-filters .select-sm,
.pg-history .h-chart-pick .select-sm,
.pg-history .h-game-m .select-sm { height: 32px; background: var(--bg); font-size: var(--fs-sm); font-weight: 500; }
.pg-history .h-game-sel { max-width: 230px; }
.pg-history .h-jf { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.pg-history .h-range { height: 32px; }
.pg-history .h-range > button { padding: 0 12px; font-size: 12px; gap: 4px; }
.pg-history .h-range .ico { width: 12px; height: 12px; opacity: .85; }
.pg-history .h-dates { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pg-history .h-reset { margin-left: auto; height: 32px; padding: 0 10px; }
.pg-history .h-flabel-t { font-size: 12px; color: var(--text-2); flex: none; }
.pg-history .h-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pg-history .h-chip {
  position: relative; flex: none; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--bg); color: var(--text);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.pg-history .h-chip:hover { border-color: var(--text-3); }
.pg-history .h-chip[aria-pressed="true"] { border-color: var(--accent); background: rgba(245, 165, 36, .12); color: var(--accent); }
.pg-history .h-sq { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }
.pg-history .h-sq-all { background: var(--accent); }
/* Outcome (monster) icon wrapper (components.outcomeIcon): artwork tile ringed in the outcome colour, or a colour dot */
.pg-history .h-ic { display: inline-flex; flex: none; vertical-align: middle; line-height: 0; }
.pg-history .h-chip .h-ic { margin-left: -2px; }

/* ---------- KPI row ---------- */
.pg-history .h-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pg-history .h-kpis .kpi { padding: 10px 14px; gap: 3px; }
.pg-history .h-kpis .kpi-v {
  font-family: var(--font); font-size: 19px; display: flex; align-items: center; gap: 6px;
  min-height: 26px; white-space: nowrap; overflow: hidden;
}
.pg-history .h-kpis .kpi-v .mono { font-weight: 700; }
.pg-history .h-kpis .kpi-s { font-family: var(--mono); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Layout ---------- */
.pg-history .h-body { display: flex; flex-direction: column; gap: 14px; }
.pg-history .h-grid { display: grid; gap: 14px; align-items: start; }
.pg-history .h-grid-a { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); align-items: stretch; }
.pg-history .h-grid-b { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }
.pg-history .h-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; position: sticky; top: calc(var(--top-h) + 14px); }
.pg-history .h-panel { overflow: hidden; }
.pg-history .h-panel > .panel-head h2 { font-size: 15px; }
.pg-history .h-box { min-width: 0; }
.pg-history .h-pad { padding: 14px; }
.pg-history .h-note { font-size: 12px; color: var(--text-3); line-height: 1.6; }

/* ---------- 分时热力 ---------- */
/* position: relative so absolutely positioned (visually-hidden) descendants are clipped by the scroll box */
.pg-history .h-heat-wrap { position: relative; overflow-x: auto; padding: 10px 14px 6px; }
.pg-history .h-om-row, .pg-history .h-li, .pg-history .h-range > button, .pg-history .h-records .panel-head { position: relative; }
.pg-history .h-heat {
  width: 100%; min-width: 620px; table-layout: fixed; border-collapse: separate; border-spacing: 2px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
/* row-header width follows the longest result name (--h-nm, em) so 布达拉广场 / 暗夜魔王 fit */
.pg-history .h-heat .h-corner { width: max(64px, calc(var(--h-nm, 3) * 12px + 34px)); position: sticky; left: 0; z-index: 1; background: var(--panel); }
.pg-history .h-heat .h-totc { width: 38px; }
.pg-history .h-heat thead th { font-size: 11px; font-weight: 400; color: var(--text-3); text-align: center; padding: 0 0 2px; }
.pg-history .h-heat thead .h-totc { text-align: right; font-family: var(--font); font-size: 12px; }
.pg-history .h-heat th[scope="row"] {
  position: sticky; left: 0; z-index: 1; background: var(--panel); padding: 0 4px 0 0;
  text-align: left; font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-history .h-heat th[scope="row"] .h-ic { margin-right: 5px; }
.pg-history .h-heat td {
  height: 26px; padding: 0; border-radius: 2px; text-align: center; font-size: 11px;
  background: var(--panel-3); color: var(--text-3);
}
.pg-history .h-heat td.is-future { background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft); }
.pg-history .h-heat .is-out { opacity: .35; }
.pg-history .h-heat td.h-tot { background: transparent; color: var(--text); font-weight: 600; text-align: right; padding-right: 2px; }
.pg-history .h-heat tfoot td { background: transparent; color: var(--text-2); box-shadow: inset 0 1px 0 var(--line); }
.pg-history .h-heat tfoot th[scope="row"] { color: var(--text-3); }
.pg-history .h-heat tr.is-dim td { opacity: .38; }
.pg-history .h-heat tr.is-dim th[scope="row"] { color: var(--text-3); }
.pg-history .h-heat tr.is-focus th[scope="row"] { color: var(--accent); font-weight: 700; }
.pg-history .h-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 14px 12px; font-size: 12px; color: var(--text-3); }
.pg-history .h-legend i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; background: var(--panel-3); }
/* hours before the real record starts: blank outlined cells (like the hours still to come), never 0 */
.pg-history .h-legend i.h-lg-norec { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); vertical-align: -1px; }

/* ---------- 当前遗漏 vs 最长 ---------- */
.pg-history .h-omit { padding: 12px 14px; display: flex; flex-direction: column; gap: 11px; }
.pg-history .h-om-row { display: grid; grid-template-columns: max(70px, calc(var(--h-nm, 3) * 13px + 30px)) minmax(0, 1fr) 72px; gap: 10px; align-items: center; }
.pg-history .h-om-name { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.pg-history .h-om-track { position: relative; display: block; height: 12px; background: var(--line-soft); }
.pg-history .h-om-track > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--line-2); }
.pg-history .h-om-track > b { position: absolute; left: 0; top: 3px; bottom: 3px; background: #C9CED8; }
.pg-history .h-om-row.is-near .h-om-track > b { background: var(--accent); }
.pg-history .h-om-val { font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap; }
.pg-history .h-om-val b { font-weight: 600; color: #C9CED8; }
.pg-history .h-om-val span { color: var(--text-3); }
.pg-history .h-om-row.is-near .h-om-val b { color: var(--accent); }
.pg-history .h-om-row.is-focus .h-om-name { color: var(--accent); font-weight: 700; }

/* ---------- 遗漏走势 (SVG) ---------- */
.pg-history .h-chart-pick { margin-left: auto; }
.pg-history .h-chart { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; padding: 14px 14px 2px; }
.pg-history .h-yax { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--text-3); text-align: right; line-height: 1; }
.pg-history .h-plot { position: relative; min-width: 0; }
.pg-history .h-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-history .h-svg .h-gl { stroke: var(--line-soft); stroke-width: 1; fill: none; }
.pg-history .h-svg .h-tl { stroke: var(--alert); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.pg-history .h-svg .h-ln { stroke: var(--accent); stroke-width: 1.6; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.pg-history .h-svg .h-dot { fill: var(--accent); }
.pg-history .h-svg .h-ring { fill: rgba(245, 165, 36, .18); }
.pg-history .h-tl-tag {
  position: absolute; left: 4px; transform: translateY(-115%);
  font-size: 12px; line-height: 1.3; color: var(--alert-soft); background: var(--panel); padding: 0 4px; border-radius: 2px; white-space: nowrap;
}
.pg-history .h-last-tag {
  position: absolute; right: 12px; transform: translateY(-130%);
  font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--accent); background: var(--panel); padding: 0 4px; border-radius: 2px;
}
.pg-history .h-xax { display: flex; justify-content: space-between; padding: 6px 14px 0 46px; font-size: 11px; color: var(--text-3); }
.pg-history .h-chart-note { padding: 6px 14px 12px; font-size: 12px; color: var(--text-3); line-height: 1.6; }

/* ---------- 结果占比 ---------- */
.pg-history .h-share { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pg-history .h-share-bar { display: flex; height: 22px; border-radius: 3px; overflow: hidden; gap: 1px; }
.pg-history .h-share-bar > span { display: block; min-width: 2px; }
.pg-history .h-share-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(92px, calc(var(--h-nm, 3) * 12px + 72px)), 1fr)); gap: 6px 10px; }
.pg-history .h-share-legend > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; min-width: 0; }
.pg-history .h-share-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.pg-history .h-share-legend b { font-family: var(--mono); font-weight: 400; color: var(--text); }

/* ---------- 开奖记录 ---------- */
.pg-history .h-table th { background: var(--panel-3); padding: 8px 14px; }
.pg-history .h-table td { padding: 4px 14px; height: 33px; }
.pg-history .h-table tbody tr:nth-child(even) td { background: var(--panel-3); }
.pg-history .h-table tbody tr:hover td { background: var(--panel-2); }
.pg-history .h-per { font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pg-history .h-per b { font-weight: 400; color: var(--text); }
.pg-history .h-time { font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pg-history .h-res { display: inline-flex; }
.pg-history .h-res .ball.is-text { min-width: 48px; }
.pg-history .h-res .ball-split { gap: 1px; background: var(--line-2); }
.pg-history .h-res .ball-split > span { padding: 0 6px; }
.pg-history .h-res .ball { white-space: nowrap; }
/* PC records table: monster icon(s) before the result chip */
.pg-history .h-res-ic { align-items: center; gap: 6px; }
/* 宠物马拉松 「[宠物3] ×9」: keep the space between the pet and its level (flex drops it) */
.pg-history .ball .ball-pet { margin-right: 4px; font-weight: 500; }

/* ---------- 宠物 × 倍率 (宠物马拉松) ---------- */
.pg-history .h-cross-wrap { position: relative; overflow-x: auto; padding: 10px 14px 4px; }
.pg-history .h-cross {
  width: 100%; min-width: 520px; table-layout: fixed; border-collapse: separate; border-spacing: 3px;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px;
}
.pg-history .h-cross .h-corner { width: max(78px, calc(var(--h-nm, 3) * 12px + 34px)); position: sticky; left: 0; z-index: 1; background: var(--panel); }
.pg-history .h-cross thead th { padding: 0 0 4px; font-weight: 400; text-align: center; }
.pg-history .h-cross .h-totc { width: 44px; text-align: right; font-family: var(--font); color: var(--text-3); }
.pg-history .h-cross .h-lastc { width: 64px; text-align: center; font-family: var(--font); color: var(--text-3); }
.pg-history .h-lv { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 22px; padding: 0 6px; border-radius: var(--r-1); font-weight: 700; }
.pg-history .h-cross th[scope="row"] {
  position: sticky; left: 0; z-index: 1; background: var(--panel); padding: 0 6px 0 0;
  text-align: left; font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--text-2); white-space: nowrap;
}
.pg-history .h-cross th[scope="row"] .h-ic { margin-right: 5px; }
.pg-history .h-cross tbody td { height: 28px; padding: 0; border-radius: 2px; text-align: center; background: var(--panel-3); color: var(--text-3); }
.pg-history .h-cross td.h-tot { background: transparent; color: var(--text); font-weight: 600; text-align: right; padding-right: 2px; }
.pg-history .h-cross td.h-last { background: transparent; text-align: center; }
.pg-history .h-cross tfoot td { height: 24px; text-align: center; color: var(--text-2); }
.pg-history .h-cross tfoot tr:first-child td, .pg-history .h-cross tfoot tr:first-child th { box-shadow: inset 0 1px 0 var(--line); }
.pg-history .h-cross tfoot th[scope="row"] { color: var(--text-3); }
.pg-history .h-cross .h-cross-om td { color: var(--accent); font-weight: 600; }
.pg-history .h-cross tr.is-dim td { opacity: .38; }
.pg-history .h-cross tr.is-focus th[scope="row"] { color: var(--accent); font-weight: 700; }
.pg-history .h-cross-panel .h-note { padding: 4px 14px 12px; }
.pg-history .h-streak { color: var(--text-3); font-family: var(--mono); font-size: 12px; }
.pg-history .h-streak.is-on { color: var(--accent); font-weight: 700; }
.pg-history .h-gap { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
/* real 一千零一夜 double result: one 当时遗漏 per sign (「3 / 0」; two lines on a phone) */
.pg-history .h-gap2 { display: inline-flex; align-items: baseline; white-space: nowrap; }
.pg-history .h-gap2-s { color: var(--text-3); white-space: pre; }
.pg-history .h-list, .pg-history .h-list-head { display: none; }
.pg-history .h-list { list-style: none; margin: 0; padding: 0; }
.pg-history .h-more-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); }
.pg-history .h-more { background: var(--panel-2); }
.pg-history .h-all { font-size: 12px; color: var(--text-3); }
.pg-history .h-foot { border-radius: 0; }

.pg-history .h-footer { margin-top: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .pg-history .h-grid-a { grid-template-columns: minmax(0, 1fr); }
  .pg-history .h-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .pg-history .h-grid-b { grid-template-columns: minmax(0, 1fr); }
  .pg-history .h-side { display: contents; }
  .pg-history .h-chart-slot { order: -1; }
}

@media (max-width: 767px) {
  .pg-history .h-page { padding-top: 12px; gap: 12px; }
  .pg-history .btn-sm { height: 44px; }  /* ≥ 44 px touch targets */

  /* head: 历史走势 + game select, then 口径, then live / back */
  .pg-history .h-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title game" "sub sub" "right right";
    align-items: center; gap: 6px 10px;
  }
  .pg-history .h-title { font-size: 18px; }
  .pg-history .h-title-game { display: none; }
  .pg-history .h-sample, .pg-history .h-real { margin-left: 6px; height: 18px; padding: 0 4px; }
  .pg-history .h-head.is-sample .h-title, .pg-history .h-head.is-real .h-title { white-space: nowrap; }
  /* keeps 「示例数据」 / 「实时数据」 on the title line */
  .pg-history .h-head.is-sample .h-game-m .select-sm, .pg-history .h-head.is-real .h-game-m .select-sm { max-width: 164px; }
  .pg-history .h-game-m { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); min-width: 0; }
  .pg-history .h-game-m .select-sm { height: 44px; max-width: 200px; background: var(--panel); }
  .pg-history .h-sub { font-size: 12px; color: var(--text-3); }
  .pg-history .h-head-r { justify-content: space-between; gap: 12px; padding: 0; }
  .pg-history .h-back { min-height: 44px; }

  /* filters: segmented range, scrollable chip bar, time band */
  .pg-history .h-filters { padding: 0; border: 0; background: transparent; gap: 10px; }
  .pg-history .h-frow { display: contents; }
  .pg-history .h-game-d, .pg-history .h-dates, .pg-history .h-reset, .pg-history .h-flabel-t { display: none; }
  .pg-history .h-filters-jf { display: none; }
  .pg-history .h-range { order: 1; width: 100%; height: 44px; }
  .pg-history .h-range > button { flex: 1; justify-content: center; font-size: 13px; padding: 0 6px; }
  .pg-history .h-chips {
    order: 2; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px;
    margin: 0 calc(-1 * var(--page-pad)); padding: 4px var(--page-pad);
  }
  .pg-history .h-chips::-webkit-scrollbar { display: none; }
  .pg-history .h-chip { height: 36px; padding: 0 10px; gap: 6px; border-radius: var(--r-2); background: var(--panel); }
  .pg-history .h-chip::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
  .pg-history .h-sq { width: 10px; height: 10px; }
  .pg-history .h-band { order: 3; width: 100%; justify-content: space-between; }
  .pg-history .h-band .select-sm { height: 44px; width: 190px; background: var(--panel); }
  .pg-history .h-jf { order: 4; min-height: 44px; }

  /* KPIs: 2 per row */
  .pg-history .h-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-history .h-kpis .kpi { padding: 10px 12px; }
  .pg-history .h-kpis .kpi-v { font-size: 18px; }
  /* the sub line wraps instead of cutting a number (「7 日最长 153 · 理论 26」 is ~0.5 px wider than a 375 px tile);
     .h-nb parts stay whole, so it breaks at 「·」 only */
  .pg-history .h-kpis .kpi-s { white-space: normal; text-overflow: clip; line-height: 1.45; }
  .pg-history .h-kpis .kpi-s .h-nb { white-space: nowrap; }

  /* panels: heading above a bordered box (mobile board) */
  .pg-history .h-body, .pg-history .h-grid { gap: 18px; }
  .pg-history .h-panel { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .pg-history .h-panel > .panel-head { padding: 0 0 8px; border: 0; min-height: 0; justify-content: space-between; }
  .pg-history .h-panel > .panel-head h2 { font-size: 16px; }
  .pg-history .h-box { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); overflow: hidden; }
  .pg-history .h-chart-pick .select-sm { height: 44px; background: var(--panel); }

  /* 分时热力 as on A3-History-M: the whole day fits the box — colour-only cells (counts stay in the
     table for screen readers), hour labels every 6 h, no 计 column / 合计 row. */
  .pg-history .h-heat-wrap { padding: 10px 8px 4px; }
  .pg-history .h-heat { min-width: 0; border-spacing: 1px 2px; }
  .pg-history .h-heat .h-corner { width: max(56px, calc(var(--h-nm, 3) * 12px + 30px)); }
  .pg-history .h-heat .h-totc, .pg-history .h-heat .h-tot, .pg-history .h-heat tfoot { display: none; }
  .pg-history .h-heat thead th { font-size: 0; text-align: left; padding: 0 0 3px; overflow: visible; white-space: nowrap; }
  .pg-history .h-heat thead th:nth-child(6n+2) { font-size: 11px; }
  .pg-history .h-heat td { height: 16px; overflow: hidden; color: transparent !important; background: var(--panel-2); }
  /* compact rows: the icon steps down to the 16 px cell height */
  .pg-history .h-heat th[scope="row"] { line-height: 16px; }
  .pg-history .h-heat th[scope="row"] .h-ic { margin-right: 4px; }
  .pg-history .h-heat th[scope="row"] .oc-ic { width: 16px !important; height: 16px !important; padding: 1px; }
  .pg-history .h-legend { padding: 4px 8px 10px; }

  .pg-history .h-omit { padding: 10px 12px; gap: 8px; }
  .pg-history .h-om-row { grid-template-columns: max(64px, calc(var(--h-nm, 3) * 12px + 28px)) minmax(0, 1fr) 64px; gap: 8px; }
  .pg-history .h-om-name { font-size: 12px; }
  .pg-history .h-om-track { height: 10px; }
  .pg-history .h-om-track > b { top: 2px; bottom: 2px; }

  .pg-history .h-chart { padding: 12px 10px 2px; grid-template-columns: 22px minmax(0, 1fr); }
  .pg-history .h-xax { padding: 6px 10px 0 38px; }
  .pg-history .h-chart-note { padding: 6px 10px 10px; }

  .pg-history .h-share { padding: 10px 12px; }
  .pg-history .h-share-legend { grid-template-columns: repeat(auto-fill, minmax(max(100px, calc(var(--h-nm, 3) * 12px + 70px)), 1fr)); }
  /* 宠物 × 倍率 fits the phone width: no 最近 column, compact level chips */
  .pg-history .h-cross-wrap { padding: 10px 8px 4px; }
  .pg-history .h-cross { min-width: 0; border-spacing: 2px; }
  .pg-history .h-cross .h-corner { width: max(72px, calc(var(--h-nm, 3) * 12px + 28px)); }
  .pg-history .h-cross .h-totc { width: 34px; }
  .pg-history .h-cross .h-lastc, .pg-history .h-cross td.h-last, .pg-history .h-cross tr > td:last-child:empty { display: none; }
  .pg-history .h-lv { min-width: 0; width: 100%; padding: 0 2px; font-size: 11px; }
  .pg-history .h-cross tbody td { height: 26px; }
  .pg-history .h-cross th[scope="row"] .h-ic { margin-right: 4px; }

  /* records: list rows instead of the table */
  .pg-history .h-table-wrap { display: none; }
  /* result column follows the widest chip (--h-rw, em): 「布达拉广场」, 「[宠物3] ×18」, 「双子 | 射手」 */
  .pg-history .h-list-head, .pg-history .h-li {
    display: grid; grid-template-columns: minmax(0, 1fr) max(76px, calc(var(--h-rw, 3) * 13px + 13px)) 40px 52px; gap: 6px; padding: 0 12px; align-items: center;
  }
  .pg-history .h-list-head { padding-top: 8px; padding-bottom: 8px; font-size: 12px; color: var(--text-3); border-bottom: 1px solid var(--line); }
  .pg-history .h-list-head span:nth-child(2) { text-align: center; }
  .pg-history .h-list-head span:nth-child(n+3) { text-align: right; }
  .pg-history .h-list { display: block; }
  .pg-history .h-li { min-height: 48px; border-bottom: 1px solid var(--line-soft); background: var(--bg); }
  .pg-history .h-li:nth-child(even) { background: var(--panel-3); }
  .pg-history .h-li-p { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
  .pg-history .h-li-p .h-per { overflow: hidden; text-overflow: ellipsis; }
  .pg-history .h-li-t { font-size: 12px; color: var(--text-3); }
  .pg-history .h-li .h-res { display: flex; justify-content: center; }
  .pg-history .h-li .h-res .ball { height: 26px; font-size: 13px; }
  .pg-history .h-li .h-res .ball.is-text { min-width: 44px; }
  .pg-history .h-li-n { text-align: right; }
  .pg-history .h-li .h-gap2 { flex-direction: column; align-items: flex-end; line-height: 1.25; }
  .pg-history .h-li .h-gap2-s { display: none; }
  .pg-history .h-more-row { padding: 0; gap: 0; }
  .pg-history .h-more { width: 100%; height: 44px; border: 0; border-radius: 0; background: var(--panel); font-size: 13px; }
  .pg-history .h-all { padding: 12px; }
  .pg-history .h-to-y { margin-left: auto; margin-right: 6px; }
  .pg-history .h-foot { background: transparent; border: 0; padding: 8px 0 0; }
}