.board-game-page { background: #090907; }
.board-game-page main { overflow: hidden; }
.board-hero { display: grid; grid-template-columns: 1.28fr .72fr; min-height: calc(100vh - 72px); background: radial-gradient(circle at 15% 25%, #2a1b12, #090907 58%); }
.board-hero-media { position: relative; min-height: 760px; overflow: hidden; }
.board-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #0d0c09 100%), linear-gradient(0deg, #0d0c09 0%, transparent 20%); }
.board-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.board-purchase { display: flex; flex-direction: column; justify-content: center; padding: 70px clamp(48px, 5vw, 90px) 70px 24px; background: linear-gradient(90deg, #0d0c09, #16120d); }
.board-purchase h1 { margin: 18px 0 22px; font: 700 clamp(52px, 4.5vw, 76px)/1 var(--font-display); letter-spacing: .1em; }
.board-purchase h1 small { display: block; margin-top: 16px; color: var(--gold-400); font-size: 20px; letter-spacing: .22em; }
.board-lead { max-width: 550px; margin: 0; color: var(--paper-300); font-size: 16px; line-height: 1.9; }
.board-meta { display: flex; gap: 28px; margin: 30px 0; padding: 20px 0; border-block: 1px solid var(--line); }
.board-meta span { color: rgba(207,192,163,.62); font-size: 12px; }.board-meta strong { display: block; margin-bottom: 5px; color: var(--paper-100); font: 700 21px var(--font-display); }
.board-price { display: flex; align-items: end; gap: 16px; }.board-price strong { color: var(--gold-400); font: 700 38px var(--font-display); }.board-price span { padding-bottom: 6px; color: #91b09a; font-size: 12px; }
.board-buy-row { display: flex; gap: 12px; margin-top: 20px; }
.quantity-control { display: grid; grid-template-columns: 42px 48px 42px; border: 1px solid var(--line); }.quantity-control button,.quantity-control input { height: 48px; border: 0; background: transparent; color: var(--paper-100); text-align: center; }.quantity-control button { cursor: pointer; font-size: 20px; }.quantity-control input { width: 48px; border-inline: 1px solid var(--line); }
.board-buy-button { flex: 1; border: 1px solid var(--gold-400); background: linear-gradient(135deg, var(--cinnabar-500), var(--cinnabar-600)); color: #fff; font-size: 16px; letter-spacing: .15em; cursor: pointer; }
.board-promises { display: flex; gap: 24px; margin: 17px 0 0; padding: 0; color: rgba(207,192,163,.55); font-size: 11px; list-style: none; }
.board-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; width: min(1180px, calc(100% - 96px)); margin: 0 auto; padding: 110px 0; border-bottom: 1px solid var(--line); }.board-intro span { color: var(--cinnabar-500); letter-spacing: .15em; }.board-intro h2 { margin: 14px 0 0; font: 700 39px var(--font-display); }.board-intro p { align-self: end; margin: 0; color: var(--paper-300); line-height: 2; }
.board-section { width: min(1180px, calc(100% - 96px)); margin: 0 auto; padding: 110px 0; }.board-section-head { margin-bottom: 42px; }.board-section-head h2 { margin: 10px 0; font: 700 40px var(--font-display); letter-spacing: .08em; }.board-section-head p { color: var(--paper-300); }
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); }.steps-grid article { min-height: 220px; padding: 32px; border-right: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.025), transparent); }.steps-grid article:last-child { border-right: 0; }.steps-grid b { color: var(--cinnabar-500); }.steps-grid h3 { margin: 32px 0 14px; font: 700 21px var(--font-display); }.steps-grid p { color: var(--paper-300); line-height: 1.8; }
.components-section { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 720px; background: #15110c; }.components-image img { width: 100%; height: 100%; object-fit: cover; }.components-copy { display: flex; flex-direction: column; justify-content: center; padding: 70px; }.components-copy h2 { margin: 12px 0 30px; font: 700 42px var(--font-display); }.components-copy ul { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }.components-copy li { display: flex; flex-direction: column; gap: 5px; padding: 20px 8px; border-bottom: 1px solid var(--line); }.components-copy li strong { color: var(--gold-400); font: 700 25px var(--font-display); }.components-copy li span { color: var(--paper-300); font-size: 12px; }
.faction-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.faction-grid article { min-height: 240px; padding: 30px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }.faction-grid article > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--gold-400); color: var(--gold-400); font: 700 20px var(--font-display); }.faction-grid h3 { margin: 30px 0 12px; font: 700 21px var(--font-display); }.faction-grid p { color: var(--paper-300); line-height: 1.8; }
.game-night { position: relative; height: 760px; }.game-night::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,7,5,.94),transparent 62%); }.game-night img { width:100%;height:100%;object-fit:cover; }.game-night > div { position:absolute; z-index:2; top:50%;left:8vw;width:440px;transform:translateY(-50%); }.game-night h2 { margin:14px 0 20px;font:700 44px/1.25 var(--font-display); }.game-night p { color:var(--paper-300);line-height:1.9; }
.rules-layout { display:grid;grid-template-columns:1.4fr .6fr;gap:48px; }.rules-layout ol { margin:0;padding:0;list-style:none;counter-reset:rule; }.rules-layout li { display:grid;grid-template-columns:140px 1fr;gap:25px;padding:22px 0;border-top:1px solid var(--line); }.rules-layout li strong { color:var(--gold-400); }.rules-layout li span { color:var(--paper-300); }.rules-layout aside { align-self:start;padding:32px;border:1px solid var(--line);background:rgba(184,50,42,.08); }.rules-layout aside strong { font:700 24px var(--font-display); }.rules-layout aside p { color:var(--paper-300);line-height:1.8; }.rules-layout aside small { color:rgba(207,192,163,.48); }
.shipping-section { display:grid;grid-template-columns:repeat(3,1fr);width:min(1180px,calc(100% - 96px));margin:0 auto 110px;border:1px solid var(--line); }.shipping-section div { padding:28px;border-right:1px solid var(--line); }.shipping-section div:last-child { border-right:0; }.shipping-section span { color:var(--gold-400);font:700 18px var(--font-display); }.shipping-section p { margin:12px 0 0;color:var(--paper-300);font-size:13px;line-height:1.8; }
.final-buy { display:flex;align-items:end;justify-content:space-between;padding:90px max(48px,calc((100% - 1180px)/2));background:linear-gradient(120deg,#221610,#0b0a08); }.final-buy h2 { margin:14px 0 0;font:700 38px var(--font-display); }.final-buy > div:last-child { display:flex;align-items:center;gap:25px; }.final-buy strong { color:var(--gold-400);font:700 34px var(--font-display); }.final-buy a { padding:14px 28px;border:1px solid var(--gold-400);background:var(--cinnabar-500);color:#fff;text-decoration:none; }
@media(max-width:1300px){.board-hero{grid-template-columns:1.1fr .9fr}.components-copy{padding:50px}.steps-grid article{padding:25px}.board-purchase{padding-right:50px}}

/* ===== 移动端显示兼容优化 ===== */
@media (max-width: 900px) {
  .board-hero { grid-template-columns: 1fr; min-height: auto; }
  .board-hero-media { min-height: 300px; }
  .board-purchase { padding: 40px 20px; }
  .board-intro { grid-template-columns: 1fr; gap: 22px; padding: 56px 0; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid article:nth-child(2n) { border-right: 0; }
  .components-section { grid-template-columns: 1fr; min-height: auto; }
  .components-image img { max-height: 320px; }
  .components-copy { padding: 40px 20px; }
  .faction-grid { grid-template-columns: 1fr 1fr; }
  .rules-layout { grid-template-columns: 1fr; gap: 24px; }
  .shipping-section { grid-template-columns: 1fr; width: calc(100% - 32px); }
  .shipping-section div { border-right: 0; border-bottom: 1px solid var(--line); }
  .shipping-section div:last-child { border-bottom: 0; }
  .game-night { height: auto; }
  .game-night img { height: 260px; }
  .game-night::after { background: linear-gradient(0deg, rgba(7,7,5,.96), rgba(7,7,5,.35)); }
  .game-night > div { position: static; transform: none; width: auto; padding: 30px 20px; }
  .final-buy { flex-direction: column; align-items: flex-start; gap: 20px; padding: 56px 20px; }
  .board-meta { flex-wrap: wrap; }
  .components-copy h2, .board-intro h2, .game-night h2, .final-buy h2, .components-copy h2 { font-size: 28px; }
}

@media (max-width: 560px) {
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid article { border-right: 0; }
  .components-copy ul { grid-template-columns: 1fr; }
  .faction-grid { grid-template-columns: 1fr; }
  .rules-layout li { grid-template-columns: 92px 1fr; gap: 12px; }
}