.page-home {
  --home-gap: clamp(20px, 3vw, 40px);
  --home-line: rgba(255, 255, 255, 0.14);
  --home-magenta-ink: #B0117C;
  --home-cyan-ink: #0A7E96;
  --home-gold-ink: #96650B;
  background: var(--ink-purple);
  color: var(--cream);
  overflow-x: clip;
}

/* ---------- 快讯带 ---------- */
.page-home .ticker {
  display: flex;
  align-items: stretch;
  background: var(--signal);
  color: var(--ink-purple);
  border-bottom: 2px solid var(--gold);
  font-size: 0.82rem;
}

.page-home .ticker__label {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--ink-purple);
  color: var(--cream);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.page-home .ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.page-home .ticker__track {
  display: flex;
  gap: 30px;
  width: max-content;
  padding: 9px 0;
  animation: home-ticker-scroll 28s linear infinite;
}

.page-home .ticker[data-paused] .ticker__track {
  animation-play-state: paused;
}

.page-home .ticker__item {
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.page-home .ticker__toggle {
  flex: none;
  border: 0;
  border-left: 1px solid rgba(18, 10, 24, 0.25);
  background: transparent;
  color: var(--ink-purple);
  font-family: var(--font-body);
  font-size: 0.72rem;
  padding: 0 14px;
  cursor: pointer;
}

.page-home .ticker__toggle:hover {
  background: rgba(18, 10, 24, 0.12);
}

.page-home .ticker__toggle:focus-visible {
  outline: 2px solid var(--ink-purple);
  outline-offset: -3px;
}

@keyframes home-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  padding-block: clamp(26px, 4vw, 52px) clamp(36px, 5vw, 76px);
  background:
    radial-gradient(110% 70% at 8% 0%, rgba(61, 225, 255, 0.12), transparent 58%),
    radial-gradient(90% 70% at 96% 12%, rgba(255, 61, 190, 0.14), transparent 62%),
    var(--ink-purple);
}

.page-home .hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.page-home .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 6px 13px;
  border: 1px solid rgba(61, 225, 255, 0.35);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.page-home .hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--cream);
  text-wrap: balance;
}

.page-home .hero__lede {
  margin: 0 0 24px;
  max-width: 54ch;
  font-size: clamp(0.96rem, 1.6vw, 1.06rem);
  line-height: 1.72;
  color: rgba(255, 247, 234, 0.86);
}

.page-home .login-steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-home .login-step {
  position: relative;
}

.page-home .login-step__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-home .login-step__label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--home-line);
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  transition: background 220ms var(--ease), border-color 220ms var(--ease);
}

.page-home .login-step__label:hover {
  background: rgba(255, 255, 255, 0.08);
}

.page-home .login-step__input:focus-visible + .login-step__label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.page-home .login-step__input:checked + .login-step__label {
  border-color: rgba(92, 225, 166, 0.55);
  background: rgba(92, 225, 166, 0.1);
}

.page-home .login-step__idx {
  flex: none;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
  padding-top: 2px;
}

.page-home .login-step__input:checked + .login-step__label .login-step__idx {
  color: var(--mint);
}

.page-home .login-step__body {
  display: grid;
  gap: 3px;
}

.page-home .login-step__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cream);
}

.page-home .login-step__input:checked + .login-step__label .login-step__title {
  text-decoration: line-through;
  text-decoration-color: rgba(92, 225, 166, 0.65);
  text-decoration-thickness: 2px;
}

.page-home .login-step__desc {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--mauve);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .hero__stage {
  min-width: 0;
}

.page-home .arcade {
  position: relative;
  overflow: hidden;
  padding: 14px 14px 16px;
  border-radius: 24px;
  border: 1px solid var(--home-line);
  background: linear-gradient(165deg, rgba(36, 17, 38, 0.94), rgba(18, 10, 24, 0.94));
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.page-home .arcade::before {
  content: "";
  position: absolute;
  inset: -32% -12% auto;
  height: 62%;
  background: radial-gradient(58% 100% at 50% 0%, rgba(255, 61, 190, 0.32), transparent 72%);
  pointer-events: none;
}

.page-home .arcade__ghost {
  position: absolute;
  top: -18px;
  right: 10px;
  z-index: 2;
  font-size: clamp(4.6rem, 13vw, 8.4rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(61, 225, 255, 0.16);
  pointer-events: none;
}

.page-home .arcade__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

.page-home .arcade__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-inline: 4px;
}

.page-home .arcade__note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--mauve);
}

.page-home .arcade__keys {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-inline: 4px;
}

.page-home .arcade__keys span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(61, 225, 255, 0.7);
}

.page-home .arcade__keys span:nth-child(2) {
  background: var(--magenta);
  box-shadow: 0 0 12px rgba(255, 61, 190, 0.7);
}

.page-home .arcade__keys span:nth-child(3) {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(242, 184, 75, 0.7);
}

/* ---------- 通用小标签 ---------- */
.page-home .home-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.page-home .home-chip--gold {
  background: rgba(242, 184, 75, 0.16);
  border-color: rgba(242, 184, 75, 0.45);
  color: var(--gold);
}

.page-home .home-chip--magenta {
  background: rgba(255, 61, 190, 0.14);
  border-color: rgba(255, 61, 190, 0.4);
  color: var(--magenta);
}

.page-home .home-chip--cyan {
  background: rgba(61, 225, 255, 0.14);
  border-color: rgba(61, 225, 255, 0.4);
  color: var(--cyan);
}

/* ---------- 版本对照（奶油纸层） ---------- */
.page-home .versions {
  margin-inline: clamp(6px, 1.5vw, 16px);
  padding-block: clamp(34px, 5vw, 64px);
  border-radius: clamp(20px, 3vw, 34px);
  background: var(--paper);
  color: var(--ink);
}

.page-home .versions__inner {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

.page-home .versions .eyebrow {
  color: var(--home-magenta-ink);
  margin: 0 0 10px;
}

.page-home .versions h2,
.page-home .qipai h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}

.page-home .versions .lede,
.page-home .qipai .lede {
  margin: 0;
  max-width: 58ch;
  font-size: 0.96rem;
  line-height: 1.72;
  color: var(--ink-soft);
}

.page-home .version-board {
  display: grid;
  gap: 18px;
}

.page-home .version-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-home .version-tabs__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-home .version-tab {
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(30, 16, 24, 0.24);
  background: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}

.page-home .version-tabs__input:focus-visible + .version-tab {
  outline: 2px solid var(--home-cyan-ink);
  outline-offset: 2px;
}

.page-home .version-board:has(#ver-12:checked) .version-tab--v12,
.page-home .version-board:has(#ver-11:checked) .version-tab--v11 {
  background: var(--ink-purple);
  border-color: var(--ink-purple);
  color: var(--cream);
  box-shadow: 0 0 0 3px rgba(61, 225, 255, 0.25);
}

.page-home .version-board:has(#ver-12:checked) .version-panel--v11,
.page-home .version-board:has(#ver-11:checked) .version-panel--v12 {
  display: none;
}

.page-home .version-panels {
  padding: clamp(16px, 2.4vw, 24px);
  border-radius: 18px;
  background: var(--cream);
  border: 1px solid rgba(30, 16, 24, 0.1);
  box-shadow: 0 12px 28px rgba(30, 16, 24, 0.08);
}

.page-home .versions .home-chip--magenta,
.page-home .qipai .home-chip--magenta {
  background: rgba(255, 61, 190, 0.1);
  border-color: rgba(176, 17, 124, 0.35);
  color: var(--home-magenta-ink);
}

.page-home .versions .home-chip--cyan,
.page-home .qipai .home-chip--cyan {
  background: rgba(61, 225, 255, 0.12);
  border-color: rgba(10, 126, 150, 0.35);
  color: var(--home-cyan-ink);
}

.page-home .versions .home-chip--gold,
.page-home .qipai .home-chip--gold {
  background: rgba(242, 184, 75, 0.18);
  border-color: rgba(150, 101, 11, 0.4);
  color: var(--home-gold-ink);
}

.page-home .diff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-home .diff {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(30, 16, 24, 0.16);
}

.page-home .diff:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-home .diff p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.page-home .versions__figure {
  margin: 0;
}

.page-home .versions__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 16px;
}

.page-home .versions__figure figcaption {
  margin-top: 10px;
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.page-home .issue-track {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(30, 16, 24, 0.14);
}

.page-home .issue-track li {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(30, 16, 24, 0.055);
  border-left: 3px solid rgba(30, 16, 24, 0.18);
}

.page-home .issue-track li.is-current {
  background: rgba(242, 184, 75, 0.18);
  border-left-color: var(--gold);
}

.page-home .issue-track .mono {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.page-home .issue-track li.is-current .mono {
  color: var(--home-gold-ink);
}

.page-home .issue-track p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ink);
}

.page-home .versions__more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--magenta);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.page-home .versions__more:hover {
  color: var(--home-magenta-ink);
}

/* ---------- 三入口 ---------- */
.page-home .entries {
  padding-block: clamp(40px, 6vw, 80px);
  background: var(--ink-purple);
}

.page-home .entries .eyebrow {
  color: var(--cyan);
  margin: 0 0 10px;
}

.page-home .entries h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--cream);
}

.page-home .entries .lede {
  margin: 0;
  max-width: 54ch;
  font-size: 0.96rem;
  line-height: 1.72;
  color: var(--mauve);
}

.page-home .entry-grid {
  display: grid;
  gap: 16px;
  margin-top: clamp(24px, 3vw, 36px);
}

.page-home .entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 20px;
  border-radius: 20px;
  border: 1px solid var(--home-line);
  background: linear-gradient(170deg, rgba(36, 17, 38, 0.96), rgba(18, 10, 24, 0.96));
  color: var(--cream);
  text-decoration: none;
  overflow: hidden;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease);
}

.page-home .entry-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 225, 255, 0.22), transparent 68%);
  opacity: 0.65;
  pointer-events: none;
}

.page-home .entry-card:nth-child(2)::after {
  background: radial-gradient(circle, rgba(255, 61, 190, 0.22), transparent 68%);
}

.page-home .entry-card:nth-child(3)::after {
  background: radial-gradient(circle, rgba(242, 184, 75, 0.24), transparent 68%);
}

.page-home .entry-card:hover {
  transform: translateY(-4px);
  border-color: rgba(61, 225, 255, 0.45);
}

.page-home .entry-card:nth-child(2):hover {
  border-color: rgba(255, 61, 190, 0.45);
}

.page-home .entry-card:nth-child(3):hover {
  border-color: rgba(242, 184, 75, 0.5);
}

.page-home .entry-card__num {
  position: relative;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cyan);
}

.page-home .entry-card:nth-child(2) .entry-card__num {
  color: var(--magenta);
}

.page-home .entry-card:nth-child(3) .entry-card__num {
  color: var(--gold);
}

.page-home .entry-card__unit {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin-left: 2px;
  opacity: 0.8;
}

.page-home .entry-card h3 {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--cream);
}

.page-home .entry-card p {
  position: relative;
  flex: 1;
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.68;
  color: var(--mauve);
}

.page-home .entry-card__go {
  position: relative;
  margin-top: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-home .entry-card:nth-child(2) .entry-card__go {
  color: var(--magenta);
}

.page-home .entry-card:nth-child(3) .entry-card__go {
  color: var(--gold);
}

/* ---------- 棋牌专题（暖纸层） ---------- */
.page-home .qipai {
  margin-inline: clamp(6px, 1.5vw, 16px);
  padding-block: clamp(34px, 5vw, 64px);
  border-radius: clamp(20px, 3vw, 34px);
  background: var(--paper-warm);
  color: var(--ink);
}

.page-home .qipai__inner {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}

.page-home .qipai__figure {
  margin: 0;
}

.page-home .qipai__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid rgba(30, 16, 24, 0.12);
}

.page-home .qipai__figure figcaption {
  margin-top: 10px;
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.page-home .qipai .eyebrow {
  color: var(--home-magenta-ink);
  margin: 0 0 10px;
}

.page-home .qipai__lede {
  margin: 0;
  max-width: 56ch;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-home .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 20px;
}

.page-home .filter-btn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(30, 16, 24, 0.24);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}

.page-home .filter-btn:hover {
  background: rgba(30, 16, 24, 0.08);
}

.page-home .filter-btn:focus-visible {
  outline: 2px solid var(--home-cyan-ink);
  outline-offset: 2px;
}

.page-home .filter-btn[aria-pressed="true"] {
  background: var(--ink-purple);
  border-color: var(--ink-purple);
  color: var(--cream);
}

.page-home .rule-list {
  display: grid;
  gap: 10px;
}

.page-home .rule-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  box-shadow: 0 6px 16px rgba(30, 16, 24, 0.07);
}

.page-home .rule-card__id {
  margin: 0 0 5px;
  font-size: 0.69rem;
  letter-spacing: 0.08em;
  color: var(--home-magenta-ink);
}

.page-home .rule-card h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.page-home .rule-card__desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.page-home .filter-empty {
  margin: 16px 0 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed rgba(30, 16, 24, 0.3);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.page-home .filter-empty[hidden] {
  display: none;
}

/* ---------- 到店行动清单 ---------- */
.page-home .plan {
  padding-block: clamp(40px, 6vw, 80px);
  background: var(--plum);
}

.page-home .plan__inner {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}

.page-home .plan__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--home-line);
}

.page-home .plan .eyebrow {
  color: var(--gold);
  margin: 0 0 10px;
}

.page-home .plan h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.4vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  color: var(--cream);
}

.page-home .plan-steps {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-home .plan-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}

.page-home .plan-steps__num {
  padding-top: 3px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-home .plan-steps h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
}

.page-home .plan-steps p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.68;
  color: var(--mauve);
}

.page-home .plan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 回访提示 ---------- */
.page-home .revisit {
  padding-block: clamp(36px, 5vw, 72px);
  background: var(--ink-purple);
}

.page-home .revisit__card {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 4vw, 40px);
  border-radius: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(61, 225, 255, 0.28);
  background:
    linear-gradient(120deg, rgba(61, 225, 255, 0.12), rgba(255, 61, 190, 0.14)),
    rgba(36, 17, 38, 0.9);
}

.page-home .revisit .eyebrow {
  color: var(--cyan);
  margin: 0 0 10px;
}

.page-home .revisit h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.18;
  color: var(--cream);
}

.page-home .revisit__copy p:not(.eyebrow) {
  margin: 0;
  max-width: 62ch;
  font-size: 0.93rem;
  line-height: 1.72;
  color: rgba(255, 247, 234, 0.84);
}

.page-home .revisit__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-home .issue-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  .page-home .entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-home .version-board {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }

  .page-home .version-tabs {
    grid-column: 1 / -1;
  }

  .page-home .version-panels {
    grid-column: 1;
  }

  .page-home .versions__figure {
    grid-column: 2;
  }
}

@media (min-width: 900px) {
  .page-home .qipai__inner {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }

  .page-home .plan__inner {
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }

  .page-home .plan__actions {
    gap: 12px;
  }
}

@media (min-width: 920px) {
  .page-home .hero__grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .page-home .revisit__card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (max-width: 519px) {
  .page-home .ticker__label {
    padding: 0 9px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .page-home .ticker__toggle {
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .page-home .diff {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .page-home .diff .home-chip {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .ticker__track {
    animation: none;
  }

  .page-home .ticker__viewport {
    overflow-x: auto;
  }

  .page-home .entry-card {
    transition: none;
  }

  .page-home .entry-card:hover {
    transform: none;
  }
}


<main id="main-content" class="page-home">

  <div class="ticker" data-ticker>
    <span class="ticker__label mono">快讯</span>
    <div class="ticker__viewport">
      <div class="ticker__track">
        <span class="ticker__item">版本说明第 12 期已上线，棋牌专题新增 18 条解释</span>
        <span class="ticker__item">结算细则 72 条速查，按登录、计分、结算、异常四类归档</span>
        <span class="ticker__item">电脑端登录三步走，熟练用户平均 40 秒进大厅</span>
        <span class="ticker__item">棋牌专题收录 84 条词条，约局前过一遍更稳</span>
        <span class="ticker__item">拉萨主体验点棋牌区设 12 张桌，单场可容 60 人</span>
        <span class="ticker__item">客服邮箱工作日 10:00-19:00 回复，复杂问题次工作日给路径</span>
        <span class="ticker__item" aria-hidden="true">版本说明第 12 期已上线，棋牌专题新增 18 条解释</span>
        <span class="ticker__item" aria-hidden="true">结算细则 72 条速查，按登录、计分、结算、异常四类归档</span>
        <span class="ticker__item" aria-hidden="true">电脑端登录三步走，熟练用户平均 40 秒进大厅</span>
        <span class="ticker__item" aria-hidden="true">棋牌专题收录 84 条词条，约局前过一遍更稳</span>
        <span class="ticker__item" aria-hidden="true">拉萨主体验点棋牌区设 12 张桌，单场可容 60 人</span>
        <span class="ticker__item" aria-hidden="true">客服邮箱工作日 10:00-19:00 回复，复杂问题次工作日给路径</span>
      </div>
    </div>
    <button class="ticker__toggle" type="button" data-ticker-toggle aria-pressed="false">暂停</button>
  </div>

  <section class="hero" aria-labelledby="hero-title">
    <div class="shell hero__grid">
      <div class="hero__copy">
        <p class="hero__eyebrow mono">首页 · 电脑端登录 · 版本说明第 12 期</p>
        <h1 id="hero-title">电脑端登录上下分电玩城，三步进大厅</h1>
        <p class="hero__lede">账号验证、设备确认、进入大厅，熟练的人四十秒能走完。第 12 期把棋牌规则里容易被读偏的段落重新写了一遍，结算侧也修了 7 条。第一次来照着做，回访的老朋友先翻差异再约人。</p>

        <ol class="login-steps" aria-label="电脑端登录三步">
          <li class="login-step">
            <input class="login-step__input" type="checkbox" id="login-step-1">
            <label class="login-step__label" for="login-step-1">
              <span class="login-step__idx mono">01</span>
              <span class="login-step__body">
                <span class="login-step__title">账号验证</span>
                <span class="login-step__desc">用注册时留下的邮箱或手机号确认是本人</span>
              </span>
            </label>
          </li>
          <li class="login-step">
            <input class="login-step__input" type="checkbox" id="login-step-2">
            <label class="login-step__label" for="login-step-2">
              <span class="login-step__idx mono">02</span>
              <span class="login-step__body">
                <span class="login-step__title">设备确认</span>
                <span class="login-step__desc">在常用的这台电脑上点一次确认，下次进来更顺</span>
              </span>
            </label>
          </li>
          <li class="login-step">
            <input class="login-step__input" type="checkbox" id="login-step-3">
            <label class="login-step__label" for="login-step-3">
              <span class="login-step__idx mono">03</span>
              <span class="login-step__body">
                <span class="login-step__title">进入大厅</span>
                <span class="login-step__desc">挑一个玩法分区，规则随时能调出来看</span>
              </span>
            </label>
          </li>
        </ol>

        <div class="hero__actions">
          <a class="btn btn--primary" href="/tools/">进入玩法工具台</a>
          <a class="btn btn--ghost" href="/insights/">看第 12 期差异</a>
        </div>
      </div>

      <aside class="hero__stage" aria-label="版本说明第 12 期要点">
        <div class="arcade">
          <span class="arcade__ghost mono" aria-hidden="true">12</span>
          <div class="arcade__media">
            <img src="{zhanqunpic:h:1200w:1600}" width="1600" height="1200" alt="斜角近景的街机摇杆与青蓝霓虹灯牌，深紫黑背景衬着奶油纸标签">
          </div>
          <div class="arcade__meta">
            <span class="home-chip home-chip--gold">第 12 期</span>
            <p class="arcade__note">棋牌解释 +18 · 结算修订 7</p>
          </div>
          <div class="arcade__keys" aria-hidden="true">
            <span></span><span></span><span></span>
          </div>
        </div>
      </aside>
    </div>
  </section>

  <section class="versions" aria-labelledby="versions-title">
    <div class="shell versions__inner">
      <header class="versions__head">
        <p class="eyebrow">版本观察</p>
        <h2 id="versions-title">第 12 期重写了棋牌解释，两版并排看</h2>
        <p class="lede">每季度更新一次。这一期动得最多的是棋牌专题里容易被读偏的段落，结算说明也跟着改了 7 条。约人之前花三分钟，把改动过的地方过一遍。</p>
      </header>

      <div class="version-board">
        <div class="version-tabs" role="group" aria-label="切换版本">
          <input class="version-tabs__input" type="radio" name="home-version" id="ver-12" checked>
          <label class="version-tab version-tab--v12" for="ver-12">当前版 · 第 12 期</label>
          <input class="version-tabs__input" type="radio" name="home-version" id="ver-11">
          <label class="version-tab version-tab--v11" for="ver-11">上一版 · 第 11 期</label>
        </div>

        <div class="version-panels">
          <div class="version-panel version-panel--v12">
            <ul class="diff-list">
              <li class="diff">
                <span class="home-chip home-chip--magenta">玩法</span>
                <p>棋牌专题新增 18 条解释，对局前和结算后各补一半。</p>
              </li>
              <li class="diff">
                <span class="home-chip home-chip--magenta">结算</span>
                <p>修订 7 条结算说明，游戏币和积分分开讲清楚各自怎么计。</p>
              </li>
              <li class="diff">
                <span class="home-chip home-chip--cyan">入口</span>
                <p>登录三步的说法统一，设备确认那一步的提示更明确。</p>
              </li>
              <li class="diff">
                <span class="home-chip home-chip--gold">异常</span>
                <p>投币或计分对不上时的处理顺序调整，先联系客服再补录。</p>
              </li>
            </ul>
          </div>

          <div class="version-panel version-panel--v11">
            <ul class="diff-list">
              <li class="diff">
                <span class="home-chip home-chip--magenta">玩法</span>
                <p>街机竞速专题补了排名解释，名次并列时怎么看。</p>
              </li>
              <li class="diff">
                <span class="home-chip home-chip--magenta">结算</span>
                <p>结算细则按登录、投币计分、结算、异常四类重新归档。</p>
              </li>
              <li class="diff">
                <span class="home-chip home-chip--cyan">入口</span>
                <p>大厅分区入口位置调整，棋牌区挪到动线更顺的一侧。</p>
              </li>
              <li class="diff">
                <span class="home-chip home-chip--gold">异常</span>
                <p>异常反馈路径更新，处理进度可以随时打客服电话问。</p>
              </li>
            </ul>
          </div>
        </div>

        <figure class="versions__figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="棋牌桌面局部特写，牌面、计分卡与暖金色标签并置，画面中没有现金">
          <figcaption>棋牌区的桌面就是这样：牌面、计分卡和规则标签挨着放，对局中随手就能对照。</figcaption>
        </figure>
      </div>

      <ol class="issue-track" aria-label="近四期版本说明">
        <li>
          <span class="mono">第 9 期</span>
          <p>结算词条补齐</p>
        </li>
        <li>
          <span class="mono">第 10 期</span>
          <p>玩法分类重排</p>
        </li>
        <li>
          <span class="mono">第 11 期</span>
          <p>异常处理路径更新</p>
        </li>
        <li class="is-current">
          <span class="mono">第 12 期</span>
          <p>棋牌解释重写</p>
        </li>
      </ol>

      <a class="versions__more" href="/insights/">展开第 12 期完整差异</a>
    </div>
  </section>

  <section class="entries" aria-labelledby="entries-title">
    <div class="shell">
      <header class="section-head">
        <p class="eyebrow">查规则 · 看玩法 · 约朋友</p>
        <h2 id="entries-title">结算怎么看、专题怎么翻、版本怎么对</h2>
        <p class="lede">挑一个方向先进去。新手从结算速查起步不吃亏，约局的人直奔棋牌专题，回访的老朋友先对差异。</p>
      </header>

      <div class="entry-grid">
        <a class="entry-card" href="/faq/">
          <span class="entry-card__num mono">72<span class="entry-card__unit">条</span></span>
          <h3>结算细则速查</h3>
          <p>按登录、投币计分、结算、异常处理四类归档。积分算不清、计分对不上，翻到对应那一类就有说法。</p>
          <span class="entry-card__go mono">去帮助中心 →</span>
        </a>
        <a class="entry-card" href="/tools/">
          <span class="entry-card__num mono">84<span class="entry-card__unit">条</span></span>
          <h3>棋牌玩法专题</h3>
          <p>棋牌词条按对局前、对局中、结算后三段排开，约朋友去电玩城玩棋牌之前，先把前三段看完。</p>
          <span class="entry-card__go mono">打开玩法工具台 →</span>
        </a>
        <a class="entry-card" href="/insights/">
          <span class="entry-card__num mono">12<span class="entry-card__unit">期</span></span>
          <h3>两版对照阅读</h3>
          <p>当前版和上一版并排翻，入口、结算、玩法、异常四类差异都挂了标签，几分钟扫完。</p>
          <span class="entry-card__go mono">看版本观察 →</span>
        </a>
      </div>
    </div>
  </section>

  <section class="qipai" aria-labelledby="qipai-title">
    <div class="shell qipai__inner">
      <figure class="qipai__figure">
        <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" loading="lazy" decoding="async" alt="街机厅与棋牌桌相邻的室内一隅，霓虹灯光反射在深色桌面上">
        <figcaption>棋牌区和街机区挨着，坐下之前先把规则扫一遍。</figcaption>
      </figure>

      <div class="qipai__body">
        <p class="eyebrow">棋牌专题预习</p>
        <h2 id="qipai-title">约朋友开局前，这几条先看了</h2>
        <p class="qipai__lede">座位怎么定、换人怎么算、积分怎么核，按标签筛一下，只看你现在用得上的那一段。</p>

        <div class="filter-bar" data-filter-group>
          <button class="filter-btn" type="button" data-filter="all" aria-pressed="true">全部</button>
          <button class="filter-btn" type="button" data-filter="对局前" aria-pressed="false">对局前</button>
          <button class="filter-btn" type="button" data-filter="对局中" aria-pressed="false">对局中</button>
          <button class="filter-btn" type="button" data-filter="结算后" aria-pressed="false">结算后</button>
        </div>

        <div class="rule-list">
          <article class="rule-card" data-filter-item data-tags="对局前">
            <p class="rule-card__id mono">0101-0012-0001</p>
            <h3>座位与出牌顺序怎么定</h3>
            <p class="rule-card__desc">开局前抽签定东位，逆时针轮转，中途不因为换人重排。</p>
          </article>
          <article class="rule-card" data-filter-item data-tags="对局前">
            <p class="rule-card__id mono">0101-0012-0002</p>
            <h3>人数不齐怎么凑一桌</h3>
            <p class="rule-card__desc">4 人到 8 人局都能开，缺一两个人的时候可以先约到店再拼桌。</p>
          </article>
          <article class="rule-card" data-filter-item data-tags="对局前">
            <p class="rule-card__id mono">0101-0012-0003</p>
            <h3>本桌的计分起点在哪看</h3>
            <p class="rule-card__desc">每张桌边挂着当期标签，计分起点和游戏币投入写在上面。</p>
          </article>
          <article class="rule-card" data-filter-item data-tags="对局中">
            <p class="rule-card__id mono">0101-0012-0004</p>
            <h3>中途换人怎么处理</h3>
            <p class="rule-card__desc">换人只在轮次结束时进行，接手的人沿用原座位的计分，不重开。</p>
          </article>
          <article class="rule-card" data-filter-item data-tags="对局中">
            <p class="rule-card__id mono">0101-0012-0005</p>
            <h3>计时和提醒谁负责</h3>
            <p class="rule-card__desc">区域工作人员按桌计时，超时会口头提醒一次，不突然中断对局。</p>
          </article>
          <article class="rule-card" data-filter-item data-tags="结算后">
            <p class="rule-card__id mono">0101-0012-0006</p>
            <h3>游戏币和积分分别怎么核</h3>
            <p class="rule-card__desc">游戏币按投入与剩余逐笔对，积分按本桌记分卡累计，两者分开核。</p>
          </article>
          <article class="rule-card" data-filter-item data-tags="结算后">
            <p class="rule-card__id mono">0101-0012-0007</p>
            <h3>结算单上有出入怎么办</h3>
            <p class="rule-card__desc">当场找结算咨询台的工作人员，凭桌号和记分卡一起复核。</p>
          </article>
          <article class="rule-card" data-filter-item data-tags="结算后">
            <p class="rule-card__id mono">0101-0012-0008</p>
            <h3>有争议走哪条处理路径</h3>
            <p class="rule-card__desc">先由现场值班人员记录，再经客服邮箱跟进，次工作日给出处理路径。</p>
          </article>
        </div>

        <p class="filter-empty" data-filter-empty hidden>这个标签下暂时没有词条，换个分类看看，或者打客服电话直接问。</p>
      </div>
    </div>
  </section>

  <section class="plan" aria-labelledby="plan-title">
    <div class="shell plan__inner">
      <div class="plan__media">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="拉萨夜色中的霓虹招牌与远处雪山轮廓，冷青与品红交织的光影">
      </div>
      <div class="plan__body">
        <p class="eyebrow">到店前</p>
        <h2 id="plan-title">约朋友来一局，三步就齐了</h2>
        <ol class="plan-steps">
          <li>
            <span class="plan-steps__num mono">01</span>
            <div>
              <h3>定人数和时间</h3>
              <p>4 人到 8 人局最好凑。先定好哪天、哪个时段，再把人数拉齐。</p>
            </div>
          </li>
          <li>
            <span class="plan-steps__num mono">02</span>
            <div>
              <h3>把棋牌专题过一遍</h3>
              <p>对局前那一栏看座位和计分起点，结算后那一栏看积分怎么核，十分钟能看完。</p>
            </div>
          </li>
          <li>
            <span class="plan-steps__num mono">03</span>
            <div>
              <h3>联系体验点</h3>
              <p>主体验点在西藏省拉萨市城关区北京中路128号电玩城大厦3层，棋牌区 12 张桌，单场可容 60 人。</p>
            </div>
          </li>
        </ol>
        <div class="plan__actions">
          <a class="btn btn--gold" href="/feedback/">问到店安排</a>
          <a class="btn btn--ghost" href="/overview/">看线下体验布局</a>
        </div>
      </div>
    </div>
  </section>

  <section class="revisit" aria-labelledby="revisit-title">
    <div class="shell">
      <div class="revisit__card">
        <div class="revisit__copy">
          <p class="eyebrow">回访提示</p>
          <h2 id="revisit-title">回来之前，先看两版差在哪</h2>
          <p>约 63% 的回访玩家会在到店前翻一遍版本对照或结算速查。第 12 期改的是棋牌解释和 7 条结算说明，改过的条目都带差异标签，扫一遍就知道自己上次记的还作不作数。</p>
        </div>
        <div class="revisit__links">
          <a class="btn btn--primary" href="/insights/">对照两个版本</a>
          <a class="btn btn--ghost" href="/faq/">查结算细则</a>
        </div>
      </div>
    </div>
  </section>

</main>