/* 首页 · 实时开奖（方案A）— boards A1-Home-M / A1-Home-PC. Every selector is scoped under .pg-home. */

/* ---------- Shared bits ---------- */
.pg-home .hm-phase { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; flex: none; }
.pg-home .hm-phase.faint .dot { background: var(--text-3); }
.pg-home .hm-phase-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Period line (cards / mobile rows): [lead + 第X期] shortens with 「…」; 「· 热度 X」 is a separate flex item that wraps onto
   the clipped second line when it does not fit, so it is shown whole or not at all (never 「热度 14…」). */
.pg-home .gc-period, .pg-home .gr-period { display: flex; flex-wrap: wrap; height: 20px; line-height: 20px; }
.pg-home .hm-pl { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-home .hm-pl-h { flex: none; white-space: pre; }
.pg-home .cd.is-off { color: var(--text-3); }
.pg-home .hm-wide-only { display: none; }

/* ---------- Live ticker (shown while the rail is not beside the page) ---------- */
.pg-home .hm-ticker {
  display: flex; align-items: center; height: 32px; overflow: hidden;
  border-bottom: 1px solid var(--line); background: var(--panel-3); font-size: 12px;
}
.pg-home .tk-live {
  flex: none; height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--panel); border-right: 1px solid var(--line); color: var(--live); font-weight: 600;
}
.pg-home .tk-scroll { flex: 1; min-width: 0; height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pg-home .tk-scroll::-webkit-scrollbar { display: none; }
.pg-home .tk-scroll:focus-visible { outline-offset: -2px; }
.pg-home .tk-list {
  list-style: none; margin: 0; padding: 0 12px; height: 100%;
  display: flex; align-items: center; gap: 18px; white-space: nowrap;
  font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2);
}
.pg-home .tk-list > li { display: inline-flex; align-items: center; gap: 6px; }
.pg-home .tk-g { font-family: var(--font); color: var(--text); }
.pg-home .tk-r { color: var(--accent); font-family: var(--font); }

/* Mobile status strip under the ticker (A1-Home-M): 数据更新于 · 延迟 · 已接入 N 个平台 */
.pg-home .hm-strip { display: none; }

/* ---------- Head ---------- */
.pg-home .hm-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title view" "sub view";
  column-gap: 16px; row-gap: 4px; align-items: end;
}
.pg-home .hm-head h1 { grid-area: title; font-size: var(--fs-2xl); font-weight: 700; line-height: 1.25; }
.pg-home .hm-head .sub { grid-area: sub; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.pg-home .hm-clock { color: var(--text); }
.pg-home .hm-h1-count { display: none; }
.pg-home .hm-view { grid-area: view; height: 32px; }
.pg-home .hm-view > button { padding: 0 12px; color: var(--text-2); }
.pg-home .hm-view > button .ico { width: 14px; height: 14px; }
.pg-home .hm-view > [aria-pressed="true"] { color: var(--text); }
.pg-home .hm-sort { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); flex: none; }
.pg-home .hm-sort .select { background: var(--panel); font-weight: 500; }
.pg-home .hm-sort-m { display: none; }

/* ---------- 九法专区 featured card ---------- */
.pg-home .hm-jf { border: 1px solid var(--accent-line); border-radius: var(--r-2); background: var(--panel); min-width: 0; overflow: hidden; }
.pg-home .hm-jf .tag-solid { font-size: 12px; }
.pg-home .hm-jf .jf-name { font-weight: 700; }
.pg-home .hm-jf .jf-meta { font-size: 12px; color: var(--text-2); }
.pg-home .hm-jf .jf-k { font-size: 12px; color: var(--text-3); }
.pg-home .hm-jf .jf-n { color: var(--text); }
.pg-home .hm-jf .balls { gap: 5px; }
.pg-home .hm-jf .ball-md { font-size: 15px; }
.pg-home .hm-jf .jf-alt { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--text-2); }
.pg-home .hm-jf .jf-alt:hover { color: var(--text); }

/* desktop / tablet: id · recent · countdown · entry */
.pg-home .hm-jf.is-pc { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) auto; }
.pg-home .hm-jf.is-pc .jf-cd .jf-k { white-space: nowrap; }
.pg-home .hm-jf.is-pc .jf-id { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--line); min-width: 0; }
.pg-home .hm-jf.is-pc .jf-name { font-size: 20px; line-height: 1.25; }
.pg-home .hm-jf.is-pc .jf-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pg-home .hm-jf.is-pc .jf-meta { line-height: 1.6; }
.pg-home .hm-jf.is-pc .jf-alt { align-self: flex-start; min-height: 24px; }
.pg-home .hm-jf.is-pc .jf-recent { padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.pg-home .hm-jf.is-pc .jf-recent .balls { overflow: hidden; }
.pg-home .hm-jf.is-pc .jf-cd {
  padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px;
  border-left: 1px solid var(--line);
}
.pg-home .hm-jf.is-pc .jf-cd .cd { font-size: 34px; }
.pg-home .hm-jf.is-pc .jf-cd .cd.is-draw { font-size: 24px; }
.pg-home .hm-jf.is-pc .jf-bar { width: 120px; }
.pg-home .hm-jf.is-pc .jf-go {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border-top: 1px solid var(--line); font-size: 14px; font-weight: 700;
}
.pg-home .hm-jf.is-pc .jf-go-sub { font-size: 12px; font-weight: 400; color: var(--text-2); }
.pg-home .hm-jf .jf-go:hover .jf-go-sub { color: var(--text); }

/* mobile: header · recent + countdown · entry links */
.pg-home .hm-jf.is-m .jf-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.pg-home .hm-jf.is-m .jf-name { font-size: 15px; white-space: nowrap; }
.pg-home .hm-jf.is-m .jf-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-home .hm-jf.is-m .jf-head .hm-phase { margin-left: auto; }
.pg-home .hm-jf.is-m .jf-body { display: flex; align-items: flex-end; gap: 12px; padding: 12px; }
.pg-home .hm-jf.is-m .jf-recent { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pg-home .hm-jf.is-m .jf-recent .jf-k { line-height: 1.5; }
.pg-home .hm-jf.is-m .balls { gap: 4px; }
.pg-home .hm-jf.is-m .ball-md { --ball: 26px; font-size: 14px; }
.pg-home .hm-jf.is-m .jf-cd { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pg-home .hm-jf.is-m .jf-cd .cd { font-size: 30px; }
.pg-home .hm-jf.is-m .jf-cd .cd.is-draw { font-size: 20px; }
.pg-home .hm-jf.is-m .jf-bar { width: 84px; }
.pg-home .hm-jf.is-m .jf-links { display: flex; border-top: 1px solid var(--line); }
.pg-home .hm-jf.is-m .jf-go {
  flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  font-size: 14px; font-weight: 700;
}
.pg-home .hm-jf.is-m .jf-go-t { flex: none; }
.pg-home .hm-jf.is-m .jf-go-sub { flex: 1; min-width: 0; font-size: 12px; font-weight: 400; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-home .hm-jf.is-m .jf-alt { flex: none; height: 44px; padding: 0 10px 0 12px; border-left: 1px solid var(--line); font-size: 13px; }
/* two 「另见」 games (九法降妖·全民 + 海洋探险): PC one 「另见」 line (wraps when narrow); phone a second link row
   below 「进入九法专区」, split into two 44 px halves */
.pg-home .hm-jf .jf-alts { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; font-size: 12px; color: var(--text-2); }
.pg-home .hm-jf.is-pc .jf-alts { align-self: flex-start; }
.pg-home .hm-jf.is-m .jf-links.has-2 { flex-wrap: wrap; }
.pg-home .hm-jf.is-m .jf-links.has-2 .jf-go { flex: 1 0 100%; }
.pg-home .hm-jf.is-m .jf-links.has-2 .jf-alt {
  flex: 1 1 0; min-width: 0; justify-content: center; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden;
}
.pg-home .hm-jf.is-m .jf-links.has-2 .jf-go + .jf-alt { border-left: 0; }
.pg-home .hm-jf.is-m .jf-links.has-2 .jf-alt-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-home .hm-jf.is-m .jf-links.has-2 .jf-alt > :not(.jf-alt-n) { flex: none; }

/* ---------- Real 九法 data (real mode): state messages, last-draw time, login ---------- */
.pg-home .hm-jf .jf-msg { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--text); }
.pg-home .hm-jf .jf-desc { font-size: 12px; line-height: 1.6; color: var(--text-2); }
.pg-home .hm-jf .jf-last { font-size: 28px; font-weight: 700; line-height: 1; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-home .hm-jf .jf-wait { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text-3); }
.pg-home .hm-jf .jf-ghost { background: var(--panel-2); border: 1px solid var(--line); animation: hmGhost 1.4s ease-in-out infinite; }
@keyframes hmGhost { 50% { opacity: .45; } }
.pg-home .hm-jf .jf-login { min-width: 104px; }
.pg-home .hm-jf .jf-reg { font-size: 12px; color: var(--text-2); min-height: 24px; display: inline-flex; align-items: center; }
.pg-home .hm-jf .jf-reg:hover { color: var(--text); }
.pg-home .hm-jf .jf-reload .ico { width: 14px; height: 14px; }
.pg-home .hm-jf .jf-alt .hm-sample { margin-left: 5px; }
.pg-home .hm-jf .jf-seg { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.pg-home .hm-jf.is-pc .jf-recent.is-state { gap: 4px; }
.pg-home .hm-jf.is-pc .jf-cd-gate { gap: 8px; min-width: 150px; }
.pg-home .hm-jf.is-pc .jf-cd-last { min-width: 132px; }
.pg-home .hm-jf.is-m .jf-body.is-state { align-items: center; }
.pg-home .hm-jf.is-m .jf-body.is-state .jf-recent { gap: 4px; }
.pg-home .hm-jf.is-m .jf-msg { font-size: 14px; }
.pg-home .hm-jf.is-m .jf-last { font-size: 24px; }
.pg-home .hm-jf.is-m .jf-login { height: 44px; min-width: 88px; }
@media (prefers-reduced-motion: reduce) {
  .pg-home .hm-jf .jf-ghost { animation: none; }
}

/* 「示例」 tag on sample-data games (real mode): before the period on cards / rows, after the name elsewhere */
.pg-home .hm-sample {
  height: 18px; padding: 0 4px; border-style: dashed; color: var(--text-2);
  font-family: var(--font); font-weight: 400; flex: none; vertical-align: 1px;
}
.pg-home .gc-period .hm-sample, .pg-home .gr-period .hm-sample { margin-right: 6px; }
.pg-home .fr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* feed (real mode): 「示例」 sits under the time, so the period line keeps its room beside a wide chip (「[宠物1] ×18」) */
.pg-home .fr .hm-sample { display: inline-flex; height: 16px; padding: 0 3px; font-size: 12px; }
.pg-home .fr-t { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pg-home .hm-nowrap { white-space: nowrap; }
.pg-home .hm-tlast { display: block; margin-top: 5px; font-size: 12px; color: var(--text-3); }

/* Platform not confirmed (其他平台): dashed tag + 「平台待确认」 on the period line; 九法专区 games are marked too */
.pg-home .hm-ptag.is-tbd { border-style: dashed; color: var(--text-2); }
.pg-home .hm-tbd-in { margin-left: 4px; padding-left: 5px; border-left: 1px solid var(--line-2); color: var(--text-3); }
.pg-home .hm-tbd { font-family: var(--font); color: var(--text-2); }
.pg-home .hm-jfmark { font-family: var(--font); color: var(--accent); }
.pg-home .hm-sep { font-family: var(--font); }
.pg-home .hm-chips .hm-chip-tbd { font-size: 12px; font-weight: 400; opacity: .8; }
.pg-home .hm-chips .chip-btn.is-tbd:not([aria-pressed="true"]) { border-style: dashed; }
.pg-home .hm-st-tbd { margin-left: 5px; font-size: 12px; color: var(--text-3); }
.pg-home .hm-tjf { height: 18px; padding: 0 5px; }

/* ---------- Platform chips (no side nav below 1024) ---------- */
.pg-home .hm-chips-wrap { position: relative; display: none; }
.pg-home .hm-chips { margin: 0 calc(-1 * var(--page-pad)); padding: 0 var(--page-pad) 2px; scroll-padding: 0 var(--page-pad); }
.pg-home .hm-chips .chip-btn { gap: 6px; }
.pg-home .hm-chips .chip-btn .count { opacity: .9; }
.pg-home .hm-chips .chip-btn[aria-pressed="true"] .dot { background: var(--on-accent) !important; }
.pg-home .hm-chips-fade {
  position: absolute; top: 0; bottom: 2px; right: calc(-1 * var(--page-pad)); width: 56px;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
  background: linear-gradient(90deg, rgba(10, 13, 18, 0), var(--bg) 60%); color: var(--text-2);
  pointer-events: none; transition: opacity var(--dur) var(--ease);
}
.pg-home .hm-chips-wrap.is-end .hm-chips-fade { opacity: 0; }

/* ---------- Status filter + sort ---------- */
.pg-home .hm-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pg-home .hm-seg-n { font-size: 12px; color: var(--text-2); }
.pg-home .hm-seg-n.is-soon { color: var(--alert-soft); }
.pg-home .hm-seg > [aria-pressed="true"] .hm-seg-n { color: inherit; }

/* ---------- Game cards (≥768) ---------- */
.pg-home .hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pg-home .gc {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); color: var(--text);
  transition: border-color var(--dur) var(--ease);
}
.pg-home .gc:hover { color: var(--text); border-color: var(--line-2); }
.pg-home .gc.is-soon { border-color: var(--alert-line); background: var(--alert-bg); }
.pg-home .gc.is-soon:hover { border-color: var(--alert); }
.pg-home .gc-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.pg-home .gc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-home .gc-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pg-home .gc-name strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pg-home .gc-name .tag { flex: none; height: 18px; padding: 0 5px; }
.pg-home .gc-period { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-home .gc-body { display: flex; align-items: center; gap: 8px; padding: 12px; }
.pg-home .gc-balls { flex: 1; min-width: 0; overflow: hidden; }
.pg-home .gc-cd { flex: none; min-width: 60px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.pg-home .gc-cd .cd { font-size: 20px; }
.pg-home .gc-cd .cd.is-draw { font-size: 14px; line-height: 20px; white-space: nowrap; }
.pg-home .gc-cd .bar { width: 64px; }
.pg-home .gc-foot {
  margin-top: auto; display: flex; gap: 12px; padding: 7px 12px; min-width: 0;
  border-top: 1px solid var(--line-soft); background: var(--panel-3); font-size: 12px; color: var(--text-2);
}
.pg-home .gc.is-soon .gc-foot { background: rgba(255, 93, 93, .05); }
.pg-home .gc-foot > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pg-home .gc-foot b, .pg-home .gr-hc b, .pg-home .hm-thc b { color: var(--text); font-weight: 400; }
/* 热 / 冷 item: 「热 [monster icon] 名称 值」 — a tight line shortens the name (「布达拉…」), never the value */
.pg-home .hm-hc { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.pg-home .hm-hc-ic { display: inline-flex; flex: none; line-height: 0; }
.pg-home .hm-hc-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-home .hm-hc-v { flex: none; }
/* card line too tight for the names (home.js fitHc): first the 「距开奖」 label steps aside (the countdown above says it);
   only if a name is still cut, the names beside icons step aside too. Both stay readable for screen readers. */
.pg-home .gc-foot.is-tight .gc-cdlabel,
.pg-home .gc-foot.is-tighter .hm-hc.has-art .hm-hc-n {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pg-home .gc-foot.is-tighter .hm-hc.has-art { gap: 3px; }
.pg-home .gc-cdlabel { margin-left: auto; flex: none; color: var(--text-3); }
.pg-home .gc-empty {
  flex: 1; display: flex; align-items: center; gap: 12px; margin: 12px; padding: 12px;
  border: 1px dashed var(--line-2); border-radius: var(--r-2);
}
.pg-home .gc-empty .ico { width: 28px; height: 28px; color: var(--text-3); }
.pg-home .gc-empty div { display: flex; flex-direction: column; gap: 2px; }
.pg-home .gc-empty strong { font-size: 13px; }
.pg-home .gc-empty span { font-size: 12px; color: var(--text-2); }

/* ---------- Dense list (v=list) ---------- */
.pg-home .hm-table-wrap { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); }
.pg-home .hm-table { min-width: 860px; }
.pg-home .hm-table td { padding: 7px 10px; white-space: nowrap; }
.pg-home .hm-table tr:last-child td { border-bottom: 0; }
.pg-home .hm-table tr.is-soon td { background: var(--alert-bg); }
.pg-home .hm-tname { display: flex; align-items: center; gap: 8px; color: var(--text); }
.pg-home .hm-tname:hover { color: var(--accent-hi); }
.pg-home .hm-tname .tag { height: 18px; padding: 0 5px; }
/* name on line 1 (+ 九法专区), platform tag (+ 待确认 / 示例) on line 2 — keeps the 距开奖 column inside the box */
.pg-home .hm-tn { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pg-home .hm-tn1, .pg-home .hm-tn2 { display: flex; align-items: center; gap: 6px; }
/* real mode: the 「示例」 tags make the name column wider — tighter cells keep the 距开奖 column inside the box at 1440 */
.pg-home .hm-table.is-real th, .pg-home .hm-table.is-real td { padding-left: 8px; padding-right: 8px; }
.pg-home .hm-table.is-real .hm-tname { gap: 6px; }
.pg-home .hm-table.is-real .hm-tname .hm-sample { padding: 0 3px; }
.pg-home .hm-tperiod { font-size: 12px; color: var(--text-3); }
.pg-home .hm-tperiod .hm-tp-a, .pg-home .hm-tperiod .hm-tp-b { display: block; line-height: 1.45; }
.pg-home .hm-tperiod .hm-tp-b { color: var(--text-2); }
.pg-home .hm-thc { font-size: 12px; color: var(--text-2); }
.pg-home .hm-thc > span { display: flex; line-height: 1.5; }
.pg-home .hm-thc > .hm-hc + .hm-hc { margin-top: 2px; }
.pg-home .hm-tcd { text-align: right; }
.pg-home .hm-tcd .cd { font-size: 16px; display: block; }
.pg-home .hm-tcd .bar { width: 64px; margin: 5px 0 0 auto; }

/* ---------- Mobile rows (≤767) ---------- */
.pg-home .hm-rows { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); overflow: hidden; }
.pg-home .gr { display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--text); min-width: 0; }
.pg-home .gr:hover { color: var(--text); background: var(--panel-2); }
.pg-home .gr.is-soon { background: rgba(255, 93, 93, .07); }
.pg-home .gr .cover { font-size: 16px !important; }
.pg-home .gr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pg-home .gr-line1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* the game name (≤ 5 characters) is never cut; on a narrow phone the state label after the tag gives way first */
.pg-home .gr-line1 strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 0; max-width: 62%; }
.pg-home .gr-line1 .tag { flex: none; height: 18px; padding: 0 5px; }
.pg-home .gr-line1 .hm-phase { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.pg-home .gr-period { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 热 · 冷: each part stays whole; a long pair (光明天使 遗漏 22) puts 冷 on a second line instead of cutting its number */
.pg-home .gr-hc { display: flex; flex-wrap: wrap; column-gap: 12px; font-size: 12px; line-height: 1.5; color: var(--text-2); min-width: 0; }
.pg-home .gr-hc > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-home .gr-off { font-size: 12px; color: var(--text-2); border: 1px dashed var(--line-2); border-radius: var(--r-1); padding: 6px 8px; }
/* min-width, not width: a long wait text (全民 「等待结果」 / 「等待新模型」, 虎牙 「等待开奖」) widens the cell instead of
   wrapping onto a second line; every other state keeps the 66 px column */
.pg-home .gr-cd { flex: none; min-width: 66px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pg-home .gr-cd .cd { font-size: 20px; }
.pg-home .gr-cd .cd.is-draw { font-size: 15px; line-height: 20px; white-space: nowrap; }
.pg-home .gr-cd .bar { width: 64px; }
.pg-home .gr-cdlabel { font-size: 12px; color: var(--text-3); }
.pg-home .hm-more { display: block; width: 100%; height: 44px; border: 0; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 500; }
.pg-home .hm-more:hover { color: var(--text); background: var(--panel-2); }
.pg-home .hm-hc-note { display: none; font-size: 12px; line-height: 1.6; color: var(--text-3); }

/* ---------- Rail: 近期开奖 / 推荐 / 数据状态 (stacked layout first, side rail ≥1280 below) ---------- */
.pg-home .hm-rail { border-top: 0; display: flex; flex-direction: column; gap: 22px; }
.pg-home .hr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pg-home .hr-head h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pg-home .hr-head a { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
.pg-home .hr-box { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
/* stacked rail: align the 推荐 heading with 近期开奖 (same 44 px heading row) */
.pg-home .hr-ads .ad-list--section .ad-list-head { min-height: 44px; margin-bottom: 4px; }
/* 近期开奖: cover · name over #期号 · result (full name, 「[宠物3] ×9」, auto width) · time — the A1-PC rail row at every width */
.pg-home .fr {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 58px; grid-template-areas: "c g r t" "c p r t";
  align-items: center; column-gap: 6px; row-gap: 1px; min-height: 52px; padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft); background: var(--panel); color: var(--text); font-size: 13px;
}
.pg-home .fr:nth-child(odd) { background: var(--panel-3); }
.pg-home .fr:last-child { border-bottom: 0; }
.pg-home a.fr:hover { color: var(--text); background: var(--panel-2); }
.pg-home .fr.is-new { background: rgba(245, 165, 36, .06); }
.pg-home .fr-hd { grid-template-areas: "c g r t"; min-height: 0; padding: 8px 12px; font-size: 12px; color: var(--text-3); background: var(--panel) !important; border-bottom-color: var(--line); }
.pg-home .fr-cv { grid-area: c; display: flex; }
.pg-home .fr-g { grid-area: g; display: flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 0; }
.pg-home .fr-p { grid-area: p; display: flex; align-items: center; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; min-width: 0; }
/* long period beside a wide chip (「[宠物3] ×18」): the head shortens, the last 6 digits stay */
.pg-home .fr-pa { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-home .fr-pb { flex: none; }
.pg-home .fr-r { grid-area: r; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; max-width: 150px; }
/* monster icon(s) before the result chip (games with outcome artwork) */
.pg-home .fr-ic { display: inline-flex; flex: none; line-height: 0; }
.pg-home .fr-t { grid-area: t; text-align: right; font-size: 12px; color: var(--text-2); }
.pg-home .fr .ball-wide { padding: 0 6px; }
.pg-home .fr .ball-wide.is-text { white-space: nowrap; }
/* 宠物马拉松 full chip 「[宠物3] ×9」: keep the space between the pet and its level (flex drops it) */
.pg-home .ball .ball-pet { margin-right: 3px; font-weight: 500; }

.pg-home .hr-status { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); }
.pg-home .hr-status-head { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.pg-home .hr-status-list { list-style: none; margin: 0; padding: 4px 0; }
.pg-home .hr-status-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 70px; gap: 8px; align-items: center; padding: 6px 12px; font-size: 12px; }
.pg-home .hr-st { display: inline-flex; align-items: center; gap: 5px; }
.pg-home .hr-st-t { text-align: right; color: var(--text-2); }
.pg-home .hr-status-note { padding: 8px 12px 10px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--text-3); }
.pg-home .hr-status-list.is-real li { grid-template-columns: minmax(0, 1fr) auto 84px; }
.pg-home .hr-st-p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 数据说明 + footer ---------- */
.pg-home .hm-end { display: flex; flex-direction: column; gap: 16px; }
/* ≥1280 the block sits in the main column: notes follow the games, the footer sinks to the bottom */
.pg-home .hm-end-slot { flex: 1; display: flex; flex-direction: column; }
.pg-home .hm-end-slot:empty { display: none; }
.pg-home .hm-end-slot > .hm-end { flex: 1; }
.pg-home .hm-after { padding: 0 var(--page-pad) 32px; }
.pg-home .hm-after:empty { display: none; }
.pg-home .hm-notes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel-3);
}
.pg-home .hm-notes > div { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); min-width: 0; }
.pg-home .hm-notes > div:last-child { border-right: 0; }
.pg-home .hm-notes .mono { font-size: 12px; color: var(--accent); }
.pg-home .hm-notes p { font-size: 12px; line-height: 1.6; color: var(--text-2); }
.pg-home .hm-footer { margin-top: auto; }
.pg-home .hm-footer-links button {
  border: 0; background: none; padding: 0; color: var(--text-2); font-size: 12px; line-height: 1.6; cursor: pointer;
}
.pg-home .hm-footer-links button:hover { color: var(--text); }

/* ---------- ≥1280: rail beside the page (A1-Home-PC) ---------- */
@media (min-width: 1280px) {
  .pg-home .hm-ticker { display: none; }
  .pg-home .hm-wide-only { display: inline; }
  .pg-home .hm-rail { gap: 0; }
  .pg-home .hr-recent .hr-head { padding: 16px 16px 10px; margin: 0; }
  .pg-home .hr-recent .hr-head h2 { font-size: 15px; }
  .pg-home .hr-recent .hr-head a { font-size: 12px; min-height: 0; }
  .pg-home .hr-box { border: 0; border-radius: 0; }
  .pg-home .fr { padding: 8px 16px; background: transparent; }
  .pg-home .fr:nth-child(odd) { background: transparent; }
  .pg-home .fr.is-new { background: rgba(245, 165, 36, .06); }
  .pg-home .fr-hd { padding: 6px 16px; border-top: 1px solid var(--line); background: transparent !important; }
  .pg-home .hr-ads { margin: 16px 16px 0; }
  .pg-home .hr-status { margin: 16px; }
}
@media (min-width: 1440px) {
  .pg-home .hm-jf.is-pc { grid-template-columns: 248px minmax(0, 1fr) auto 164px; }
  .pg-home .hm-jf.is-pc .jf-go {
    grid-column: auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
    border-top: 0; border-left: 1px solid var(--line);
  }
}

/* ---------- <1280: rail stacked below the page ---------- */
@media (max-width: 1279px) {
  .pg-home .with-rail { min-height: 0; }
  .pg-home .hm-main { padding-bottom: 22px; }
  .pg-home .hm-rail { padding-top: 0; padding-bottom: 22px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .pg-home .hm-rail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 22px 20px; }
  .pg-home .hr-recent { grid-row: span 2; }
}

/* ---------- ≤1023: platform chips replace the side nav ---------- */
@media (max-width: 1023px) {
  .pg-home .hm-chips-wrap { display: block; }
}

/* ---------- ≤767: mobile (A1-Home-M) ---------- */
@media (max-width: 767px) {
  .pg-home .hm-strip {
    display: flex; align-items: center; gap: 6px; padding: 10px var(--page-pad);
    border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--text-2);
  }
  .pg-home .hm-main { gap: 12px; }
  .pg-home .hm-jf { order: -1; }
  .pg-home .hm-head { grid-template-areas: "title sort"; align-items: center; margin-top: 6px; }
  .pg-home .hm-head h1 { font-size: 20px; }
  .pg-home .hm-head .sub { display: none; }   /* the status strip above carries 更新于 on mobile */
  .pg-home .hm-jf.is-m .jf-go > .ico { display: none; }   /* room for 「术牌 · 36/72 期 · 走势」 beside 海洋探险 */
  .pg-home .hm-list .btn-sm { height: 44px; }           /* empty-state actions: ≥ 44 px touch target */
  .pg-home .hm-h1-count { display: inline; font-size: 13px; font-weight: 400; color: var(--text-3); }
  .pg-home .hm-view { display: none; }
  .pg-home .hm-sort-m { display: flex; grid-area: sort; }
  .pg-home .hm-sort-pc { display: none; }
  .pg-home .hm-sort .select { height: 44px; font-size: 13px; }
  .pg-home .hm-chips .chip-btn { height: 44px; }
  .pg-home .hm-toolbar { gap: 0; }
  .pg-home .hm-toolbar .spacer { display: none; }
  .pg-home .hm-seg { display: flex; width: 100%; height: 46px; }   /* 44 px buttons inside the 1 px border */
  .pg-home .hm-seg > button { flex: 1; min-width: 0; justify-content: center; gap: 4px; padding: 0 4px; }
  .pg-home .hm-hc-note { display: block; margin-top: -4px; }
  .pg-home .hm-notes { grid-template-columns: minmax(0, 1fr); }
  .pg-home .hm-notes > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .pg-home .hm-notes > div:last-child { border-bottom: 0; }
  .pg-home .hm-footer { flex-direction: column; gap: 6px; }
  .pg-home .hm-footer-links button { min-height: 44px; }
  .pg-home .hm-after { padding-bottom: 24px; }
}
/* a long name (「九法降妖·全民」) one step smaller on phones up to 413 px, so neither 「·全民」 nor the phase label is cut;
   the line box keeps the 15 px row height */
@media (max-width: 413px) {
  .pg-home .gr-line1 strong.is-long { font-size: 13px; max-width: 70%; line-height: 22.5px; }
}
@media (max-width: 389px) {
  .pg-home .gr .ball { --ball: 22px; }
  /* 375 px: room for 「生肖大点灯 其他平台 ● 直播中」 on one line */
  .pg-home .gr { gap: 8px; }
  .pg-home .gr-line1 { gap: 5px; }
  .pg-home .gr-line1 .tag { padding: 0 4px; }
  .pg-home .hm-jf.is-m .ball-md { --ball: 24px; }
  .pg-home .fr-name.is-long { font-size: 12px; letter-spacing: -0.2px; line-height: 19.5px; }
}

/* 用户协议 / 隐私政策 dialog (home.js [data-doc] → contentDoc): plain text, line breaks kept. Lives in #modal-root. */
.hm-doc { white-space: pre-line; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.8; color: var(--text-2); }