/* 游戏页 (#/game/<id>) — 方案A「终端」. Boards: A2-Detail-PC / -PC-Col / -M / -M-Col.
   Every selector is scoped under .pg-game (the stats sheet modal also carries .pg-game). */

.pg-game .gm { gap: 14px; padding-top: 16px; }

/* ---------- Header ---------- */
.pg-game .gm-crumbs { font-size: 12px; gap: 8px; }
.pg-game .gm-crumb-cur { color: var(--text); }
.pg-game .gm-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pg-game .gm-head-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pg-game .gm-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-game .gm-title h1 { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; }
.pg-game .gm-phase-wrap { display: inline-flex; }
.pg-game .gm-phase.tag-live { background: rgba(47, 217, 143, .08); }
.pg-game .gm-meta { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; }
.pg-game .gm-meta b { color: var(--text); font-weight: 500; }
/* platform not confirmed by a public source: 「其他平台 · 待确认」 */
.pg-game .gm-unconf { border-style: dashed; }
/* 宠物马拉松: pet names are placeholders */
.pg-game .gm-petnote { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.pg-game .gm-petnote .ico { width: 14px; height: 14px; flex: none; }
.pg-game .gm-actions { display: flex; gap: 8px; flex: none; }
.pg-game .gm-btn { height: 36px; padding: 0 14px; background: var(--panel-2); }
.pg-game .gm-fav[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); }
.pg-game .gm-fav[aria-pressed="true"] svg { fill: currentColor; }
.pg-game .gm-favhint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -4px;
  padding: 8px 12px; border: 1px solid var(--accent-line); border-radius: var(--r-2);
  background: var(--panel-3); font-size: 12px; color: var(--text-2);
}
.pg-game .gm-favhint a { font-weight: 700; }

/* ---------- 当期 + KPI row ---------- */
.pg-game .gm-top { display: flex; gap: 14px; align-items: stretch; }
.pg-game .gm-top .gm-cur-wrap { width: 420px; flex: none; display: flex; }
.pg-game .gm-cur {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--accent-line); border-radius: var(--r-2); background: var(--panel);
}
.pg-game .gm-cur.is-off { border-color: var(--line); }
.pg-game .gm-cur-h {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-2);
}
.pg-game .gm-cur-h .mono { font-size: var(--fs-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-game .gm-cur-off { font-size: var(--fs-sm); color: var(--text-2); }
.pg-game .gm-cur-b { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 14px 10px; }
.pg-game .gm-cur-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pg-game .gm-cur-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pg-game .gm-k { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.pg-game .gm-cd { font-size: 52px; letter-spacing: -.01em; min-height: 52px; display: inline-flex; align-items: center; }
.pg-game .gm-cd.is-draw { font-family: var(--font); font-size: 40px; }
.pg-game .gm-cur.is-off .gm-cd { color: var(--text-3); }
.pg-game .gm-big {
  min-width: 64px; height: 40px; padding: 0 10px; border-radius: var(--r-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; white-space: nowrap;
}
.pg-game .gm-big.is-split > .gm-half { padding: 0 8px; font-size: 15px; }
/* outcome icon(s) (components.outcomeIcon) — a group of 1–2 icons; 上期 result = icon(s) beside the chip */
.pg-game .gm-ics { display: inline-flex; align-items: center; gap: 2px; flex: none; }
/* games without artwork: the colour dot fills its (12–14 px) box, like the former colour chip */
.pg-game .gm-ics .oc-ic.is-dot i { width: 100%; height: 100%; }
.pg-game .gm-lastres { display: inline-flex; align-items: center; gap: 8px; }
/* no round yet (new game / data reset): muted 「暂无开奖记录」 in place of the 上期 chip, same height as the chip */
.pg-game .gm-nores { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.pg-game .gm-strip-last .gm-nores { min-height: 26px; }
/* double result where space is tight (KPI tile, mobile 当期 box): the second icon overlaps the first, separated by a
   panel-coloured outline (the outcome ring stays) */
.pg-game .gm-kpi-v .gm-ics.is-multi .oc-ic + .oc-ic { margin-left: -10px; box-shadow: inset 0 0 0 1.5px var(--oc), 0 0 0 2px var(--panel); }
.pg-game .gm-cur-bar { padding: 0 14px 10px; }
.pg-game .gm-bar { height: 3px; }
.pg-game .gm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pg-game .gm-steps li { padding: 8px 12px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pg-game .gm-steps li + li { border-left: 1px solid var(--line); }
.pg-game .gm-steps li.is-done { color: var(--text-3); }
.pg-game .gm-steps li.is-on { color: var(--accent); background: var(--accent-soft); font-weight: 700; }

.pg-game .gm-kpis {
  flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden;
}
.pg-game .gm-kpi { background: var(--panel); padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.pg-game .gm-kpi-k { font-size: 12px; color: var(--text-3); }
/* value row: [outcome icon(s)] [name number] — 32 px tall in every tile (with or without an icon) so the rows line up;
   the text keeps its own baseline and ellipsis */
.pg-game .gm-kpi-v { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.pg-game .gm-kpi-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-game .gm-kpi-v .mono { font-size: var(--fs-lg); }
.pg-game .gm-unit { font-family: var(--font); font-size: var(--fs-sm); font-weight: 500; margin-left: 4px; color: var(--text-2); }
.pg-game .gm-kpi-s { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Records + aside ---------- */
.pg-game .gm-main { display: flex; gap: 14px; align-items: flex-start; }
.pg-game .gm-rec { flex: 1; min-width: 0; }
.pg-game .gm-aside { width: 330px; flex: none; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.pg-game .gm-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pg-game .gm-tools h2 { font-size: var(--fs-lg); font-weight: 700; margin-right: 2px; }
.pg-game .gm-tl { font-size: 12px; color: var(--text-2); }
.pg-game .gm-tools .seg { height: 32px; }
.pg-game .gm-tools .seg > button { padding: 0 12px; font-size: var(--fs-sm); }
.pg-game .gm-tools .seg-quiet > button { color: var(--text-2); }
.pg-game .gm-tools .seg-quiet > [aria-pressed="true"] { color: var(--text); }
/* Keep the selected segment visible while hovered (and after a tap on touch screens, where :hover sticks). */
.pg-game .seg > [aria-pressed="true"]:hover { background: var(--accent); color: var(--on-accent); }
.pg-game .seg-quiet > [aria-pressed="true"]:hover { background: var(--panel-2); color: var(--text); }
.pg-game .gm-switch {
  height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--bg); font-size: 12px; font-weight: 500; position: relative;
}
.pg-game .gm-switch .track { width: 28px; height: 16px; }
.pg-game .gm-switch .track::after { width: 12px; height: 12px; }
.pg-game .gm-switch input:checked + .track::after { transform: translateX(12px); }
.pg-game .gm-date { display: flex; align-items: center; gap: 6px; }
.pg-game .gm-date .select { height: 32px; font-size: 12px; background: var(--bg); }
.pg-game .gm-newest { margin-left: auto; height: 32px; padding: 0 8px; color: var(--accent); font-weight: 500; }
.pg-game .gm-newest:hover { color: var(--accent-hi); }

.pg-game .gm-sep { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; font-size: 12px; color: var(--text-2); }
.pg-game .gm-sep-w { color: var(--text-3); margin-left: -4px; }
.pg-game .gm-sep i { flex: 1; height: 1px; background: var(--line-2); min-width: 12px; }
.pg-game .gm-sep-r { text-align: right; }
.pg-game .gm-sep-r b { color: var(--text); font-weight: 500; }
.pg-game .gm-foot { padding: 8px 14px 12px; font-size: 12px; line-height: 1.6; color: var(--text-3); }
.pg-game .gm-empty { padding: 10px 14px 14px; }

/* Result spans shared by cells, pairs and chips */
.pg-game .is-split { position: relative; display: flex; gap: 1px; padding: 0; background: var(--bg); overflow: hidden; }
.pg-game .is-split > .gm-half { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.pg-game .gm-m { font-family: var(--mono); font-size: 11px; font-weight: 600; opacity: .85; }
/* 宠物马拉松 result: pet name + that period's level (box coloured by the level) */
.pg-game .gm-petres { gap: 5px; }
.pg-game .gm-petres .gm-pn { font-weight: 600; }
.pg-game .gm-petres .gm-px { font-family: var(--mono); font-weight: 700; }
/* level chip 「×9」 (KPIs, cross-table header, legends) */
.pg-game .gm-lv {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 20px; padding: 0 4px;
  border-radius: 3px; font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1; vertical-align: 2px; white-space: nowrap;
}
.pg-game .gm-kpi-v .gm-lv { height: 24px; min-width: 38px; font-size: var(--fs-md); vertical-align: 3px; }
.pg-game .gm-lvlegend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; font-size: 12px; color: var(--text-3); }
.pg-game .gm-lvlegend > span:first-child { margin-right: 2px; }

/* 时段视图 (PC) */
.pg-game .gm-tbox {
  position: relative; max-height: 620px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 14px; display: flex; flex-direction: column; gap: 6px;
}
.pg-game .gm-tbox:focus-visible { outline-offset: -2px; }
.pg-game .gm-trow { display: grid; grid-template-columns: 56px repeat(10, minmax(0, 1fr)); gap: 6px; flex: none; }
.pg-game .gm-trow.is-first:not(:first-child) { margin-top: 4px; }
.pg-game .gm-tlabel { display: flex; align-items: center; font-size: var(--fs-sm); color: var(--text-2); border-right: 1px solid var(--line); }
.pg-game .gm-cell {
  height: 50px; min-width: 0; border-radius: var(--r-1); overflow: hidden;
  display: flex; flex-direction: column; border: 1px solid var(--line-soft); background: var(--panel-3);
  container-type: inline-size; /* the result font follows the cell width (cqw below) */
}
.pg-game .gm-cell-t { height: 16px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.pg-game .gm-cell-r { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; overflow: hidden; }
/* Names fit the cell: 14 px when there is room, down to 12 px for 4–5 character names; a name that still does not fit
   wraps once at its middle (<wbr> + keep-all) instead of being clipped. --n = label width in em (set by game.js).
   The 10 px reserve keeps ≈ 4 px of air on each side of a 4-character name in narrow (mobile) cells. */
.pg-game .gm-cell-r.gm-fit {
  padding: 0 2px; line-height: 1.1; text-align: center; white-space: normal; word-break: keep-all; overflow-wrap: normal;
  font-size: clamp(12px, calc((100cqw - 10px) / var(--n, 2)), 14px);
  /* a 「×120」 倍数 (F-QM3) drops below the name instead of clipping it */
  flex-wrap: wrap; align-content: center; row-gap: 0;
}
.pg-game .gm-cell-r.is-split > .gm-half { font-size: var(--fs-sm); }
/* 宠物马拉松 in a cell: pet on the first line, the level below */
.pg-game .gm-cell-r.gm-petres { flex-direction: column; gap: 1px; line-height: 1.1; }
.pg-game .gm-cell-r.gm-petres .gm-pn { font-size: 12px; }
.pg-game .gm-cell-r.gm-petres .gm-px { font-size: 13px; }
.pg-game .gm-cell.is-latest { border-color: var(--accent); }
.pg-game .gm-cell.is-latest .gm-cell-t { color: var(--accent); }
.pg-game .gm-cell.is-pending { border: 1px dashed var(--accent); }
.pg-game .gm-cell.is-pending .gm-cell-t { color: var(--accent); }
.pg-game .gm-cell.is-pending .gm-cell-r { color: var(--accent); background: var(--accent-soft); font-family: var(--mono); font-size: 15px; }
.pg-game .gm-cell.is-future { background: transparent; border-color: #161B23; }
.pg-game .gm-cell.is-future .gm-cell-t { color: #4A5260; }
.pg-game .is-flash { animation: gmFlash 1.2s var(--ease) 1; }
@keyframes gmFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); } 30% { box-shadow: 0 0 0 4px rgba(245, 165, 36, .45); } }

/* 列式视图 (PC) */
.pg-game .gm-strip { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel-3); }
.pg-game .gm-sec { font-size: 40px; min-width: 2ch; }
.pg-game .gm-sec.is-text { font-family: var(--font); font-size: 26px; }
.pg-game .gm-strip-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pg-game .gm-strip-t strong { font-size: var(--fs-lg); }
.pg-game .gm-strip-t .mono { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-game .gm-strip-bar { flex: 1; min-width: 40px; margin-left: 12px; }
.pg-game .gm-strip-last { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.pg-game .gm-strip-last > span:first-child { font-size: 12px; color: var(--text-3); }
.pg-game .gm-lastchip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-1); font-size: 15px; font-weight: 700; white-space: nowrap; }
.pg-game .gm-lastchip.is-split > .gm-half { padding: 0 8px; font-size: var(--fs-sm); }

.pg-game .gm-cbox { position: relative; overflow-x: auto; overscroll-behavior-x: contain; padding: 6px 14px 10px; }
.pg-game .gm-cbox:focus-visible { outline-offset: -2px; }
/* max-content width so the box's right padding stays after the newest column when scrolled to the end.
   Columns grow to share the width but never past 200 px (a lone column does not stretch into a wide empty bar). */
.pg-game .gm-cols { display: flex; gap: 8px; width: max-content; min-width: 100%; }
.pg-game .gm-col { flex: 1 0 144px; min-width: 144px; max-width: 200px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-1); overflow: hidden; background: var(--panel-3); }
.pg-game .gm-col.is-live { border-color: var(--accent-line); }
/* column header: time range + 期数 */
.pg-game .gm-col-h {
  height: 28px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px;
  font-size: 12px; white-space: nowrap; background: var(--panel); border-bottom: 1px solid var(--line);
}
.pg-game .gm-col-t { color: var(--text); font-weight: 600; letter-spacing: -.01em; }
.pg-game .gm-col-n { color: var(--text-3); }
.pg-game .gm-col-n b { color: var(--text-2); font-weight: 600; }
.pg-game .gm-col.is-live .gm-col-t { color: var(--accent); }
/* [time | result] row: a compact mono time column directly followed by the result, which takes the rest of the width */
.pg-game .gm-pair { position: relative; height: 26px; flex: none; display: grid; grid-template-columns: 42px minmax(0, 1fr); border-bottom: 1px solid var(--line-soft); }
.pg-game .gm-col .gm-pair.is-q { border-bottom: 2px solid var(--line-2); } /* divider after every 5 rows */
.pg-game .gm-col .gm-pair:last-child { border-bottom: 0; }
.pg-game .gm-pair-t {
  display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--text-3);
}
.pg-game .gm-pr { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 4px; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; }
.pg-game .gm-pr.is-split { padding: 0; }
.pg-game .gm-pr.is-split > .gm-half { font-size: 12px; }
.pg-game .gm-pair.is-latest .gm-pair-t { color: var(--accent); }
.pg-game .gm-pair.is-latest::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--accent); pointer-events: none; }
.pg-game .gm-pair.is-pending .gm-pair-t { color: var(--accent); }
.pg-game .gm-pair.is-pending .gm-pr { color: var(--accent); background: var(--accent-soft); font-family: var(--mono); }
.pg-game .gm-pair.is-pending::after { content: ''; position: absolute; inset: 0; border: 1px dashed var(--accent); pointer-events: none; }
.pg-game .gm-pair.is-future .gm-pair-t { color: #4A5260; }
.pg-game .gm-chint { display: flex; align-items: center; gap: 6px; padding: 2px 14px 0; font-size: 12px; color: var(--text-3); }

/* ---------- 今日统计 ---------- */
.pg-game .gm-sp { overflow: hidden; }
.pg-game .gm-sp-h { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.pg-game .gm-sp-h h2 { font-size: var(--fs-lg); font-weight: 700; }
.pg-game .gm-sp-h > span { font-size: 12px; color: var(--text-3); }
.pg-game .gm-sp-note { padding: 8px 14px; font-size: 12px; color: var(--text-3); line-height: 1.6; }
.pg-game .gm-sp-empty { padding: 12px 14px; }

/* Real-data mode: this game is sample data (「示例数据」 tag beside the title + one-line note in the stats panel) */
.pg-game .gm-sample { border-style: dashed; color: var(--text-2); }
.pg-game .gm-sample-note {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); background: var(--panel-3);
  font-size: 12px; line-height: 1.5; color: var(--text-2);
}
.pg-game .gm-sample-note .ico { width: 14px; height: 14px; flex: none; color: var(--text-3); }

/* Real 虎牙 results (一千零一夜 / 宠物马拉松 / 浪漫约会): 「实时数据」 tag (tag-live like the home page), estimated
   countdown, overdue 「等待开奖结果」 and the calm 「暂无新结果」 state, partial-day notice, real pet table */
.pg-game .gm-real { background: rgba(47, 217, 143, .08); }
.pg-game .gm-cd.is-wait { font-family: var(--font); font-size: 26px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.pg-game .gm-cd.gm-cd-off { color: var(--text-2); font-weight: 600; }
.pg-game .gm-real-note .ico { color: var(--accent); }
.pg-game .gm-partial {
  display: flex; align-items: flex-start; gap: 6px; margin: 4px 14px 2px; padding: 7px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--panel-3);
  font-size: 12px; line-height: 1.5; color: var(--text-2);
}
.pg-game .gm-partial .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--text-3); }
.pg-game .gm-partial b { color: var(--text); font-weight: 600; }
/* real 宠物马拉松 今日统计: 占比 with a share bar (relative to the most frequent pet) */
.pg-game .gm-st-pet .gm-pct { white-space: nowrap; }
.pg-game .gm-pbar { display: inline-block; width: 44px; height: 4px; margin-right: 8px; vertical-align: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pg-game .gm-pbar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.pg-game .gm-st { font-size: var(--fs-sm); }
.pg-game .gm-st th { position: static; background: var(--panel-3); padding: 7px 14px; font-size: 12px; }
.pg-game .gm-st td { height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line-soft); }
.pg-game .gm-st th + th, .pg-game .gm-st td + td { padding-left: 4px; }
.pg-game .gm-st tbody tr:nth-child(even) td { background: var(--panel-3); }
.pg-game .gm-st tbody tr:hover td { background: var(--panel-2); }
.pg-game .gm-name { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pg-game .gm-mult { font-weight: 700; }
.pg-game .gm-numchip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: var(--r-1); font-family: var(--mono); font-size: var(--fs-sm); font-weight: 700; line-height: 1; vertical-align: 2px;
}
.pg-game .gm-sum-v .gm-numchip { min-width: 20px; height: 20px; font-size: 12px; vertical-align: 0; }

/* 宠物马拉松 纵横对应 cross-table: pets × multiplier levels (+ totals). Scrolls inside its own box when narrow. */
.pg-game .gm-xt-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.pg-game .gm-xt-wrap:focus-visible { outline-offset: -2px; }
.pg-game .gm-xt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pg-game .gm-xt th, .pg-game .gm-xt td { height: 34px; padding: 0 3px; text-align: center; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.pg-game .gm-xt td { font-family: var(--mono); color: var(--text); min-width: 34px; }
.pg-game .gm-xt thead th { height: 36px; background: var(--panel-3); font-size: 12px; font-weight: 500; color: var(--text-3); border-bottom-color: var(--line); }
.pg-game .gm-xt thead th.is-hl .gm-lv { box-shadow: 0 0 0 1px var(--panel-3), 0 0 0 2px var(--accent); }
.pg-game .gm-xt .gm-xt-p {
  position: sticky; left: 0; z-index: 1; text-align: left; padding: 0 6px 0 14px;
  background: var(--panel); color: var(--text); font-size: var(--fs-sm); font-weight: 500;
}
.pg-game .gm-xt thead .gm-xt-p, .pg-game .gm-xt tfoot .gm-xt-p { background: var(--panel-3); color: var(--text-3); font-size: 12px; }
.pg-game .gm-xt tr.is-hl > .gm-xt-p { color: var(--accent); font-weight: 700; }
.pg-game .gm-xt .is-zero { color: var(--text-3); }
.pg-game .gm-xt td.is-last { box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }
.pg-game .gm-xt .gm-xt-s { padding: 0 14px 0 6px; color: var(--text-2); font-weight: 600; background: var(--panel-3); }
.pg-game .gm-xt thead .gm-xt-s { color: var(--text-3); font-weight: 500; }
.pg-game .gm-xt tfoot th, .pg-game .gm-xt tfoot td { border-bottom: 0; border-top: 1px solid var(--line); background: var(--panel-3); }
.pg-game .gm-xt tfoot td:not(:last-child) { padding: 0 3px; }
.pg-game .gm-xt .gm-xt-all { color: var(--text); }
.pg-game .gm-xt-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 8px 14px 0;
  font-size: 12px; color: var(--text-3); line-height: 1.5;
}
.pg-game .gm-xt-legend b { color: var(--text); font-weight: 600; }
.pg-game .gm-xt-legend { column-gap: 14px; }
.pg-game .gm-xt-li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pg-game .gm-xt-legend .gm-lv { vertical-align: 0; height: 18px; min-width: 26px; }
.pg-game .gm-xt-key { width: 14px; height: 14px; border-radius: 2px; flex: none; }
.pg-game .gm-xt-key.is-last { box-shadow: inset 0 0 0 2px var(--accent); }
.pg-game .gm-xt-key.is-heat { background: linear-gradient(90deg, rgba(245, 165, 36, .07), rgba(245, 165, 36, .4)); }

.pg-game .gm-sum-h { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.pg-game .gm-sum-h h2 { font-size: var(--fs-md); font-weight: 700; }
.pg-game .gm-sum-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 36px; padding: 6px 14px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.pg-game .gm-sum-row:last-child { border-bottom: 0; }
.pg-game .gm-sum-k { color: var(--text-2); white-space: nowrap; }
.pg-game .gm-sum-v { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.pg-game .gm-sum-v b { font-weight: 600; }
.pg-game .gm-sum-v small { font-size: 12px; color: var(--text-3); }

.pg-game .gm-footer { margin-top: 10px; }

/* ---------- Stats sheet (modal carries .pg-game .gm-sheet) ---------- */
.pg-game.gm-sheet .modal-body { padding: 0 0 8px; }
.pg-game .gm-sheet-sub { padding: 8px 14px; font-size: 12px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.pg-game.gm-sheet .gm-sum { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.pg-game.gm-sheet .gm-sp-note { border-top: 1px solid var(--line); }
.pg-game.gm-sheet .gm-xt-legend { padding-bottom: 12px; }

/* ---------- Tablet / small desktop ---------- */
@media (max-width: 1439px) {
  /* decorative 视图 / 时间 labels (the groups keep aria-labels): dropping them keeps the toolbar on one row at 1366 */
  .pg-game .gm-tl-x { display: none; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
  /* aside beside the records → cells ≈ 53–60 px: shrink double-result halves so both names fit */
  .pg-game .gm-trow { gap: 5px; }
  .pg-game .gm-tbox { gap: 5px; }
  .pg-game .gm-cell-r.is-split > .gm-half { font-size: 12px; }
}
@media (max-width: 1279px) {
  .pg-game .gm-main { flex-direction: column; align-items: stretch; }
  .pg-game .gm-aside { width: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .pg-game .gm-top .gm-cur-wrap { width: 380px; }
  /* 2 × 3 tiles beside the 当期 panel: 3 across would leave ≈ 125 px per tile at 1024 and clip 4–5 character names */
  .pg-game .gm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-game .gm-kpi { padding: 8px 12px; gap: 2px; }
  /* the 3-row tile block is taller than the 当期 panel: keep its countdown block vertically centred */
  .pg-game .gm-cur-b { align-items: center; }
  .pg-game .gm-kpi-v { font-size: 17px; }
  .pg-game .gm-tools { gap: 8px; }
}
@media (max-width: 1023px) {
  .pg-game .gm-cd { font-size: 46px; min-height: 46px; }
  .pg-game .gm-trow { grid-template-columns: 48px repeat(10, minmax(0, 1fr)); gap: 5px; }
  .pg-game .gm-cell-r { font-size: var(--fs-sm); }
  .pg-game .gm-cell-r.is-split > .gm-half { font-size: 12px; }
}

/* ---------- Mobile 列表 = the PC 列式 columns (2026-10-24) ----------
   game.js renders .gm-mcbox only on the mobile layout (≤767 px, also a narrowed desktop window). The box scrolls
   sideways inside the page gutter and opens at the newest end. Column width = a third of the box, so a 375 px phone
   shows exactly the last three columns side by side; boxes ≥ 480 / 620 px show 4 / 5. Columns snap, so a swipe always
   ends on whole columns. Chip font follows the column (cqw of .gm-col): --n = label width in em (game.js res(…, {n})),
   12–15 px — 5-character names (布达拉广场), doubles and 宠物 ×倍率 chips still fit a 360 px phone.
   content-visibility: a whole day is up to 72 columns × 20 rows and the box is re-rendered every round; off-screen
   columns skip style/layout (≈ 0.8–1 s → < 0.1 s per render on a 6× throttled CPU). Width stays explicit; 558 px =
   header 38 + 20 rows × 26 (content box), so skipped columns keep the real height. */
.pg-game .gm-mcbox { container: gm-mc / inline-size; padding: 0 0 8px; scroll-snap-type: x mandatory; }
.pg-game .gm-mcbox .gm-cols { gap: 6px; }
.pg-game .gm-mcbox .gm-col {
  --tw: 38px; flex: none; width: calc((100cqw - 12px) / 3); min-width: 0; max-width: none;
  container: gm-mcol / inline-size; scroll-snap-align: start;
  content-visibility: auto; contain-intrinsic-block-size: auto 558px;
}
@container gm-mc (min-width: 480px) { .pg-game .gm-mcbox .gm-col { width: calc((100cqw - 18px) / 4); } }
@container gm-mc (min-width: 620px) { .pg-game .gm-mcbox .gm-col { width: calc((100cqw - 24px) / 5); } }
/* header on two lines: 「21:00–21:19」 over 「20 期」 / 「进行中」 (same height in every column, rows stay aligned) */
.pg-game .gm-mcbox .gm-col-h { height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0 4px; line-height: 16px; }
.pg-game .gm-mcbox .gm-pair { grid-template-columns: var(--tw) minmax(0, 1fr); }
.pg-game .gm-mcbox .gm-pair-t { letter-spacing: -.04em; }
.pg-game .gm-mcbox .gm-pr { padding: 0 2px; font-size: clamp(12px, calc((100cqw - var(--tw) - 6px) / var(--n, 2)), 15px); }
.pg-game .gm-mcbox .gm-pr.is-split { padding: 0; }
.pg-game .gm-mcbox .gm-pr.is-split > .gm-half { font-size: 13px; }
.pg-game .gm-mcbox .gm-pr.gm-petres { gap: .25em; }
.pg-game .gm-mcbox .gm-pr.gm-petres .gm-px { font-size: max(11px, .9em); } /* 「×18」: digits, ≥ 11 px */

/* ---------- Mobile (≤767 px; the page renders its mobile markup) ---------- */
@media (max-width: 767px) {
  .pg-game .gm { gap: 12px; padding-top: 4px; }
  .pg-game .gm-mnav { display: flex; align-items: center; gap: 2px; margin: 0 -8px -6px; min-width: 0; }
  .pg-game .gm-back { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 4px; color: var(--text); font-size: var(--fs-md); white-space: nowrap; }
  .pg-game .gm-back .ico { width: 22px; height: 22px; }
  .pg-game .gm-mnav-p { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
  .pg-game .gm-ibtn { width: 44px; height: 44px; border: 0; color: var(--text); }
  .pg-game .gm-ibtn .ico { width: 20px; height: 20px; }

  .pg-game .gm-head { align-items: flex-start; gap: 12px; margin: 0 -16px; padding: 4px 16px 12px; border-bottom: 1px solid var(--line); }
  .pg-game .gm-head-t { gap: 4px; }
  .pg-game .gm-title { gap: 8px; }
  .pg-game .gm-title h1 { font-size: 19px; }
  .pg-game .gm-title .tag { height: 18px; padding: 0 5px; }
  .pg-game .gm-phase.tag-live { border-color: transparent; background: transparent; padding: 0; }
  /* real 虎牙 games: every phase tag borderless like 直播中, so 「等待结果」/「即将开奖」 stay on the title line next to
     「实时数据」 (no header jump each round) */
  .pg-game .gm-title-hy .gm-phase { border-color: transparent; background: transparent; padding: 0; }
  .pg-game .gm-meta { font-size: 12px; }
  .pg-game .gm-meta-2 { color: var(--text-3); }
  .pg-game .gm-favhint { margin-top: 0; padding: 0 4px 0 12px; min-height: 44px; flex-wrap: nowrap; }
  .pg-game .gm-favhint > span { flex: 1; min-width: 0; }
  .pg-game .gm-favhint a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; flex: none; }
  /* 44 px touch target for the empty-state CTA (btn-sm is 36 px on mobile) */
  .pg-game .gm-empty .btn { height: 44px; }

  .pg-game .gm-mcur { border: 1px solid var(--accent-line); border-radius: var(--r-2); background: var(--panel); padding: 12px; display: flex; align-items: center; gap: 12px; }
  .pg-game .gm-mcur.is-off { border-color: var(--line); }
  .pg-game .gm-mcur.is-off .gm-cd { color: var(--text-3); }
  .pg-game .gm-mcur-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .pg-game .gm-mcur-p { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 「第…期 · 21:00」: when narrow only the long period number shortens — the draw time always stays visible */
  .pg-game .gm-mcur-p.gm-mcur-pf { display: flex; min-width: 0; }
  .pg-game .gm-mcur-pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pg-game .gm-mcur-pt { flex: none; }
  .pg-game .gm-mcur .gm-ics.is-multi .oc-ic + .oc-ic { margin-left: -10px; box-shadow: inset 0 0 0 1.5px var(--oc), 0 0 0 2px var(--panel); }
  .pg-game .gm-mcur .gm-cd { font-size: 40px; min-height: 40px; }
  .pg-game .gm-mcur .gm-cd.is-draw { font-size: 30px; }
  .pg-game .gm-mcur .gm-cd.is-wait { font-size: 22px; min-height: 40px; }
  .pg-game .gm-mrec .gm-partial { margin: 0 0 8px; }
  .pg-game .gm-pbar { width: 32px; margin-right: 6px; }
  .pg-game .gm-mcur .gm-bar { margin-top: 4px; }
  .pg-game .gm-mcur-r { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
  .pg-game .gm-mcur .gm-big { min-width: 60px; font-size: var(--fs-lg); }

  .pg-game .gm-mstats { overflow: hidden; }
  .pg-game .gm-mstats-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .pg-game .gm-mstats-h h2 { font-size: 15px; font-weight: 700; flex: none; }
  .pg-game .gm-mstats-h > span { font-size: 12px; color: var(--text-3); text-align: right; }
  .pg-game .gm-st th { padding: 6px 12px; }
  .pg-game .gm-st td { height: 36px; padding: 0 12px; }
  .pg-game .gm-mstats .gm-st tbody tr:nth-child(even) td { background: transparent; }
  .pg-game .gm-expand {
    width: 100%; height: 44px; border: 0; border-top: 1px solid var(--line); background: transparent;
    color: var(--accent); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .pg-game .gm-mnote { margin-top: 6px; font-size: 12px; color: var(--text-3); }
  .pg-game .gm-mnote .gm-sp-note { padding: 0; }
  .pg-game .gm-sample-note { padding: 8px 12px; }
  /* 纵横对应 on a phone: same table, pet column sticky; the card keeps its own sideways scroll on very narrow screens */
  .pg-game .gm-mstats .gm-xt .gm-xt-p { padding-left: 12px; }
  .pg-game .gm-mstats .gm-xt .gm-xt-s { padding-right: 12px; }
  .pg-game .gm-mstats .gm-xt-legend { padding: 8px 12px 10px; }
  .pg-game .gm-xt td, .pg-game .gm-xt th { height: 36px; }
  .pg-game .gm-lvlegend { padding: 10px 0 0; }
  .pg-game .gm-petnote { margin-top: 2px; }

  /* Sticky control bar */
  .pg-game .gm-mbar {
    position: sticky; top: var(--top-h); z-index: 20; margin: 2px -16px 0; padding: 10px 16px 6px;
    background: var(--panel-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 8px;
  }
  .pg-game .gm-mbar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-2); }
  .pg-game .gm-mcd .cd { font-size: 12px; }
  /* 46 px box (1 px border each side) → 44 px buttons */
  .pg-game .gm-mseg { display: flex; width: 100%; height: 46px; }
  .pg-game .gm-mseg > button { flex: 1; justify-content: center; font-size: 15px; }
  .pg-game .gm-mseg .ico { width: 16px; height: 16px; }
  .pg-game .gm-mbar-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .pg-game .gm-pill {
    position: relative; height: 44px; padding: 0 14px; border: 0; background: transparent;
    color: var(--text); font-size: var(--fs-sm); font-weight: 500; display: inline-flex; align-items: center; flex: none;
  }
  .pg-game .gm-pill::before {
    content: ''; position: absolute; left: 0; right: 0; top: 5px; bottom: 5px;
    border: 1px solid var(--line-2); border-radius: 17px; pointer-events: none;
  }
  .pg-game .gm-pill[aria-pressed="true"] { color: var(--accent); }
  .pg-game .gm-pill[aria-pressed="true"]::before { border-color: var(--accent); background: rgba(245, 165, 36, .12); }
  .pg-game .gm-pill-sel { padding: 0; }
  .pg-game .gm-pill-sel select {
    height: 44px; padding: 0 8px 0 12px; border: 0; background: transparent; color: var(--text);
    font-size: var(--fs-sm); outline: none; cursor: pointer;
  }
  .pg-game .gm-pill-sel select option { background: var(--panel); color: var(--text); }
  .pg-game .gm-pill-sel:focus-within::before { border-color: var(--accent); }
  .pg-game .gm-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
  /* 列表 hint 「左右滑动查看更早」 + the 倍数 pill need 344 px: below that the hint shortens (ellipsis) instead of
     pushing the page sideways */
  .pg-game .gm-hint { min-width: 0; }
  .pg-game .gm-hint > [data-hint] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* Mobile records */
  .pg-game .gm-mrec { touch-action: pan-y; min-width: 0; }
  .pg-game .gm-mrec .gm-sep { padding: 0 0 6px; gap: 8px; }
  .pg-game .gm-mrec .gm-sep-r { color: var(--text-3); }
  .pg-game .gm-mrec .gm-foot { padding: 10px 0 0; }
  .pg-game .gm-mrec .gm-empty { padding: 4px 0 0; }
  .pg-game .gm-empty .empty { flex-wrap: wrap; }
  .pg-game .gm-empty .empty > div { flex: 1 1 200px; min-width: 0; }
  .pg-game .gm-mt { display: flex; flex-direction: column; gap: 12px; }
  .pg-game .gm-mslot { display: flex; flex-direction: column; gap: 5px; }
  .pg-game .gm-mslot-h { display: flex; align-items: center; gap: 8px; min-height: 22px; }
  .pg-game .gm-mslot-l { font-size: var(--fs-sm); font-weight: 600; color: #C9CED8; }
  .pg-game .gm-mslot-h i { flex: 1; height: 1px; background: var(--line-soft); }
  .pg-game .gm-mslot-c { font-size: 12px; color: var(--text-3); }
  .pg-game .gm-mgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .pg-game .gm-mgrid .gm-cell { height: 46px; }
  .pg-game .gm-mgrid .gm-cell-t { height: 15px; }
  .pg-game .gm-mgrid .gm-cell-r.is-split > .gm-half { font-size: 12px; }
  .pg-game .gm-mgrid .gm-cell.is-pending .gm-cell-r { font-size: var(--fs-md); }
  .pg-game .gm-more {
    width: 100%; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-2);
    background: var(--panel); color: var(--text); font-size: var(--fs-sm); font-weight: 500;
  }
  .pg-game .gm-more:hover { background: var(--panel-2); }
  .pg-game .gm-footer { margin-top: 6px; }

  /* Sheet on mobile */
  .pg-game.gm-sheet .gm-st td { height: 34px; padding: 0 14px; }
  .pg-game.gm-sheet .gm-st th { padding: 6px 14px; }
  .pg-game.gm-sheet .gm-st th + th, .pg-game.gm-sheet .gm-st td + td { padding-left: 4px; }
}