/* 别册：小游戏 + 3D 翻页书（纸墨朱的刊物语言）
   v2 —— 修好字体加载、棋盘工艺、真书厚度与明暗、移动端溢出 */

/* ---------- 字体：这两个页面此前只引 paper-extra，字体全落回系统 ---------- */
@font-face{
  font-family:"Noto Serif SC Local"; src:url("../fonts/noto-serif-sc-subset.woff2") format("woff2");
  font-display:swap; font-weight:200 900;
}
@font-face{
  font-family:"Noto Sans SC Local"; src:url("../fonts/noto-sans-sc-subset.woff2") format("woff2");
  font-display:swap; font-weight:200 900;
}
@font-face{
  font-family:"SourceCodeMono Local"; src:url("../fonts/sourcecode-mono-subset.woff2") format("woff2");
  font-display:swap; font-weight:400;
}

:root{
  --pp-paper:#F7F3EA; --pp-paper-2:#EFE9DC; --pp-card:#FCFAF4;
  --pp-ink:#1A1612; --pp-ink-2:#3D362E; --pp-ink-3:#6B6156;
  --pp-rule:#D9CFBC; --pp-rule-soft:#E7DFD0; --pp-rule-ink:#1A1612;
  --pp-seal:#B33322; --pp-seal-fill:#C8402C;
  --serif:"Noto Serif SC Local","Songti SC",serif;
  --mono:"SourceCodeMono Local","Noto Sans SC Local",ui-monospace,Consolas,monospace;
  --sans:"Noto Sans SC Local",system-ui,"Microsoft YaHei",sans-serif;
  --dur-2:160ms; --dur-4:320ms; --dur-5:520ms;
  --ease-paper:cubic-bezier(.12,.68,.24,1);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--pp-paper); color:var(--pp-ink);
  font-family:var(--sans); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--pp-ink); text-decoration:underline; text-decoration-color:var(--pp-rule); text-underline-offset:3px; }
a:hover{ color:var(--pp-seal); text-decoration-color:var(--pp-seal); }
:focus-visible{ outline:2px solid var(--pp-seal-fill); outline-offset:2px; }
.wrap{ max-width:1120px; margin:0 auto; padding:26px clamp(16px,3vw,40px) 70px; position:relative; }

.mast{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pp-ink-3); border-top:6px solid var(--pp-rule-ink); padding-top:10px;
}
.mast b{ color:var(--pp-ink); font-weight:400; }
.head{ border-bottom:3px double var(--pp-rule-ink); padding:18px 0 16px; margin:0 0 22px; }
.kicker{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--pp-seal); margin:0 0 10px; }
.head h1{ font-family:var(--serif); font-size:clamp(30px,4vw,46px); line-height:1.2; margin:0 0 10px; font-weight:700; letter-spacing:.01em; }
.head p{ margin:0; font-family:var(--serif); font-size:16.5px; color:var(--pp-ink-2); max-width:62ch; }

.tabs{ display:flex; flex-wrap:wrap; border-bottom:1px solid var(--pp-rule-ink); margin:0 0 22px; }
.tabs button{
  appearance:none; background:transparent; border:0; border-bottom:2px solid transparent;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--pp-ink-3); padding:10px 16px; cursor:pointer; margin-bottom:-1px;
}
.tabs button[aria-selected="true"]{ color:var(--pp-ink); border-bottom-color:var(--pp-seal-fill); }
.tabs button:hover{ color:var(--pp-seal); }
.game{ display:none; }
.game.on{ display:block; }

/* ---------- 棋盘柜：三处统一规格 ---------- */
.cab{ border-top:2px solid var(--pp-rule-ink); padding-top:14px; }
.cab-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; margin:0 0 14px; }
.cab-head h3{ font-family:var(--serif); font-size:22px; margin:0; font-weight:700; }
.cab-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--pp-ink-3); }
.cab-main{ display:grid; grid-template-columns:auto minmax(200px,270px); gap:clamp(16px,3vw,40px); align-items:start; justify-content:start; }
.cab-side{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.stage{ position:relative; border:1px solid var(--pp-rule-ink); background:var(--pp-card); line-height:0; }
.stage canvas{ display:block; width:100%; height:auto; max-width:100%; }
.stage--mine{ border:0; background:transparent; }

.readout{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--pp-rule); padding:2px 0 6px; }
.readout span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--pp-ink-3); text-transform:uppercase; }
.readout b{ font-family:var(--mono); font-weight:400; font-size:26px; line-height:1.1;
  font-variant-numeric:tabular-nums; color:var(--pp-ink); min-width:3ch; text-align:right; }
.readout b.pop{ animation:numPop var(--dur-4) var(--ease-paper); }
@keyframes numPop{ 0%{transform:translateY(0)} 35%{transform:translateY(-4px); color:var(--pp-seal)} 100%{transform:translateY(0)} }

.next-box{ border-bottom:1px solid var(--pp-rule); padding:4px 0 8px; }
.next-box span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--pp-ink-3); }
#nextCv{ display:block; width:96px; height:96px; margin-top:6px; }

.keys{ font-family:var(--mono); font-size:11.5px; color:var(--pp-ink-3); line-height:1.9; letter-spacing:.03em; margin:4px 0 0; }
.keys kbd{ font-family:var(--mono); font-size:11px; border:1px solid var(--pp-rule); padding:1px 5px; margin:0 2px; color:var(--pp-ink-2); }
.pad{ display:grid; grid-template-columns:repeat(3,46px); gap:6px; margin-top:2px; }
.pad button{
  height:44px; border:1px solid var(--pp-rule-ink); background:var(--pp-card);
  font-family:var(--mono); font-size:15px; cursor:pointer; color:var(--pp-ink);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.7), inset -1px -1px 0 rgba(26,22,18,.12);
}
.pad button:active{ transform:translateY(1px); box-shadow:inset -1px -1px 0 rgba(255,255,255,.6), inset 1px 1px 0 rgba(26,22,18,.16); }
.pad .sp{ visibility:hidden; }

.overlay{
  position:absolute; inset:0; display:none; place-items:center; text-align:center; padding:20px;
  background:transparent; line-height:1.7;
}
.overlay.on{ display:grid; }
.ov-card{
  max-width:30ch; padding:22px 26px; background:var(--pp-paper);
  border:1px solid var(--pp-rule-ink);
  box-shadow:0 18px 40px -26px rgba(26,22,18,.55);
}
.ov-kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--pp-seal); margin:0 0 8px; text-transform:uppercase; }
.ov-line{ font-family:var(--serif); font-size:19px; margin:0 0 14px; color:var(--pp-ink); }
.pause-stamp{
  position:absolute; right:12px; top:12px; z-index:2;
  width:52px; height:52px; display:none; place-items:center;
  border:1.5px solid var(--pp-seal-fill); outline:1px solid var(--pp-seal-fill); outline-offset:2px;
  color:var(--pp-seal); font-family:var(--serif); font-size:22px; font-weight:700;
  transform:rotate(-8deg); opacity:.9; pointer-events:none; background:rgba(247,243,234,.7);
}
.pause-stamp.on{ display:grid; }

.btn{
  appearance:none; cursor:pointer; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; padding:9px 18px; border:1px solid var(--pp-rule-ink);
  background:transparent; color:var(--pp-ink);
}
.btn:hover{ background:var(--pp-ink); color:var(--pp-paper); }
.btn.primary{ border-color:var(--pp-seal-fill); color:var(--pp-seal); }
.btn.primary:hover{ background:var(--pp-seal-fill); color:var(--pp-paper); }
.btn[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }

/* ---------- 扫雷：压痕格子 + CSS 旗/雷 ---------- */
.mine-wrap{ border:1px solid var(--pp-rule-ink); padding:6px; background:var(--pp-card); display:inline-block; }
.mine-grid{ display:grid; gap:1px; background:color-mix(in srgb, var(--pp-ink) 18%, transparent); }
.cell{
  width:34px; height:34px; display:grid; place-items:center; position:relative;
  font-family:var(--mono); font-size:14px; cursor:pointer; user-select:none; border:0;
  background:#F5F0E4; color:var(--pp-ink);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.82), inset -1px -1px 0 rgba(26,22,18,.20);
}
.cell:hover{ background:#EFE9DC; }
.cell:active{ transform:translateY(1px); }
.cell.open{ background:#EBE4D4; cursor:default; box-shadow:inset 0 0 0 1px rgba(26,22,18,.06); }
.cell.mine{ background:var(--pp-seal-fill); box-shadow:none; }
.cell.mine::after{
  content:""; width:14px; height:14px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #FCFAF4 0 2.2px, transparent 2.4px),
    conic-gradient(from 0deg, #FCFAF4 0 9deg, transparent 9deg 81deg,
      #FCFAF4 81deg 90deg, transparent 90deg 171deg,
      #FCFAF4 171deg 180deg, transparent 180deg 261deg,
      #FCFAF4 261deg 270deg, transparent 270deg 351deg,
      #FCFAF4 351deg 360deg);
}
.cell.flag::before{
  content:""; width:14px; height:14px; position:absolute;
  background:
    linear-gradient(to right, var(--pp-seal) 0 2px, transparent 2px) 2px 0 / 12px 14px no-repeat,
    linear-gradient(135deg, var(--pp-seal) 0 50%, transparent 50%) 4px 0 / 9px 9px no-repeat;
}
.cell.n1{ color:#1d4ed8 } .cell.n2{ color:#166534 } .cell.n3{ color:#9a3412 }
.cell.n4{ color:#5b21b6 } .cell.n5{ color:#7f1d1d } .cell.n6,.cell.n7,.cell.n8{ color:#374151 }
.cell.reveal{ animation:revealIn var(--dur-2) var(--ease-paper) both; animation-delay:var(--d,0ms); }
@keyframes revealIn{
  from{ background:color-mix(in srgb, var(--pp-seal-fill) 22%, #EBE4D4); }
  to{ background:#EBE4D4; }
}
.mine-result{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--pp-ink-3); margin-top:10px; min-height:1.4em; }

/* ---------- 3D 翻页书 ---------- */
.book-stage{
  display:grid; place-items:center; padding:26px 0 18px;
  perspective:2600px; perspective-origin:50% 46%;
  overflow:clip; contain:layout style;
}
.book{
  position:relative;
  width:min(1040px, 92vw, calc((100vh - 330px) * 1.48));
  aspect-ratio:1.48 / 1;
  display:grid; grid-template-columns:1fr 1fr;
  touch-action:pan-y; outline:none;
}
.book:focus-visible{ outline:2px solid var(--pp-seal-fill); outline-offset:6px; }

.bk-block{
  position:absolute; top:5px; bottom:-7px; width:calc(50% + 7px);
  background:var(--pp-paper-2); border:1px solid var(--pp-rule);
  box-shadow:0 16px 32px -20px rgba(26,22,18,.55);
}
.bk-block--l{ left:-7px; }
.bk-block--r{ right:-7px; }
.bk-block::after{
  content:""; position:absolute; top:0; bottom:0; width:7px;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--pp-ink) 24%, transparent) 0 1px, transparent 1px 2.4px);
  opacity:.5;
}
.bk-block--l::after{ left:0; }
.bk-block--r::after{ right:0; }

.bk-page{
  position:relative; background:var(--pp-paper);
  border:1px solid var(--pp-rule); padding:clamp(16px,3vw,30px) clamp(16px,3.4vw,34px);
  overflow:hidden; display:flex; flex-direction:column; line-height:1.75;
}
.bk-page--l{ grid-column:1; }
.bk-page--r{ grid-column:2; }

.bk-spine{
  position:absolute; left:calc(50% - 1.5px); top:-5px; bottom:-7px; width:3px; z-index:5;
  background:linear-gradient(180deg, transparent, var(--pp-seal-fill) 8%, var(--pp-seal-fill) 92%, transparent);
  opacity:.5; pointer-events:none;
}
.bk-gutter{ position:absolute; top:0; bottom:0; width:36px; z-index:3; pointer-events:none; }
.bk-gutter--l{ left:calc(50% - 36px);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--pp-ink) 13%, transparent)); }
.bk-gutter--r{ left:50%;
  background:linear-gradient(90deg, color-mix(in srgb, var(--pp-ink) 13%, transparent), transparent); }

.leaf{
  position:absolute; left:50%; top:0; width:50%; height:100%;
  transform-origin:left center; transform-style:preserve-3d;
  pointer-events:none; transform:rotateY(0deg);
}
.leaf__face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 0 28px rgba(26,22,18,.16);
  background:var(--pp-paper); border:1px solid var(--pp-rule);
  padding:clamp(16px,3vw,30px) clamp(16px,3.4vw,34px);
  overflow:hidden; display:flex; flex-direction:column; line-height:1.75;
}
.leaf__face.verso{ transform:rotateY(180deg) translateZ(-.4px); }

.bk-shade{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--pp-ink) 38%, transparent), transparent 64%);
  opacity:calc(var(--shade, 0) * .92);
}
.bk-cast{
  position:absolute; left:50%; right:-7px; bottom:-12px; height:16px; z-index:1;
  background:radial-gradient(62% 100% at 22% 0%, color-mix(in srgb, var(--pp-ink) 30%, transparent), transparent 72%);
  opacity:calc(.22 + var(--shade, 0) * .58); pointer-events:none;
}
.bk-ribbon{
  position:absolute; right:26px; bottom:-16px; width:14px; height:46px; z-index:6;
  background:var(--pp-seal-fill); opacity:.85;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);
  box-shadow:0 2px 6px -2px rgba(26,22,18,.5); pointer-events:none;
}

.bk-page h3, .leaf h3{ font-family:var(--serif); font-size:clamp(19px,2.3vw,26px); margin:0 0 10px; line-height:1.3; }
.bk-page p, .leaf p{ margin:0 0 9px; font-family:var(--serif); font-size:14.6px; color:var(--pp-ink-2); }
.bk-page .small, .leaf .small{ font-family:var(--sans); font-size:13px; color:var(--pp-ink-3); }
.bk-no, .leaf .leaf__no{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pp-ink-3); margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--pp-rule);
  display:flex; justify-content:space-between; gap:10px;
}
.bk-folio, .leaf .leaf__folio{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--pp-rule);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--pp-ink-3);
  display:flex; justify-content:space-between;
}
.bk-page ul, .leaf ul{ margin:0; padding-left:18px; font-family:var(--serif); font-size:14.6px; color:var(--pp-ink-2); }
.bk-page ul li, .leaf ul li{ margin:5px 0; }
.news-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--pp-ink-3); margin-top:auto; padding-top:10px; }
.news-src{ display:block; margin-top:5px; font-size:11.5px; }

.book-fallback{ display:none; }
html:not(.js) .book-stage{ display:none; }
html:not(.js) .book-fallback{ display:block; }
.book-hint{ text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--pp-ink-3); margin-top:8px; }
.book-nav{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.book-count{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--pp-ink-3); min-width:9ch; text-align:center; }

.foot{ border-top:3px double var(--pp-rule-ink); margin-top:40px; padding-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--pp-ink-3); }

@media (max-width:900px){
  .cab-main{ grid-template-columns:1fr; }
  .cab-side{ flex-direction:row; flex-wrap:wrap; gap:10px 18px; align-items:flex-end; }
  .readout{ flex:1 1 120px; }
  .keys{ flex:1 1 100%; }
  .pad{ margin-left:auto; }
}
@media (max-width:760px){
  body{ font-size:15px; }
  .wrap{ padding:18px 14px 60px; }
  .cell{ width:30px; height:30px; font-size:12.5px; }
  .readout b{ font-size:22px; }
  .cab-head h3{ font-size:19px; }
  .book{ width:min(92vw, 520px); aspect-ratio:0.74/1; grid-template-columns:1fr; }
  .bk-block--l, .bk-page--l{ display:none; }
  .bk-block--r{ width:calc(100% + 7px); }
  .leaf{ left:0; width:100%; }
  .bk-spine{ left:auto; right:-5px; }
  .bk-gutter--l{ display:none; }
  .bk-gutter--r{ left:auto; right:-18px; width:18px; }
  .bk-ribbon{ right:14px; }
}
@media (prefers-reduced-motion: reduce){
  .leaf{ transition:none !important; }
  .bk-cast, .pause-stamp{ display:none !important; }
  .cell.reveal, .readout b.pop{ animation:none !important; }
}
@media print{
  .tabs,.pad,.book-nav,.book-hint,.overlay,.bk-cast,.bk-ribbon,.pause-stamp{ display:none !important; }
  .book-stage{ perspective:none; }
}

/* ---------- 静音开关 ---------- */
.mast-snd{
  appearance:none; background:transparent; border:1px solid var(--pp-rule);
  color:var(--pp-ink-3); font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  padding:3px 9px; cursor:pointer;
}
.mast-snd:hover{ color:var(--pp-ink); border-color:var(--pp-rule-ink); }
.mast-snd[aria-pressed="false"]{ color:var(--pp-seal); border-color:var(--pp-seal-fill); }

/* ---------- 卷页：纸边高光 + 背面阴影，随 --shade/--curl 变化 ---------- */
.leaf__face::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:16%;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 62%,
    rgba(255,255,255,.85) 88%,
    rgba(26,22,18,.10) 100%);
  opacity:calc(var(--shade, 0) * .9);
  pointer-events:none; mix-blend-mode:soft-light;
}
.leaf__face.verso::after{ right:auto; left:0; transform:scaleX(-1); }
.leaf::after{
  content:""; position:absolute; top:0; bottom:0; right:-2px; width:6px;
  background:linear-gradient(90deg, rgba(26,22,18,.28), rgba(26,22,18,0));
  opacity:calc(var(--shade, 0) * .85); pointer-events:none;
}
/* 书脊一侧的静态压痕，翻页时加深 */
.bk-page--r::before, .bk-page--l::after{
  content:""; position:absolute; top:0; bottom:0; width:26px; pointer-events:none;
  background:linear-gradient(90deg, rgba(26,22,18,.10), rgba(26,22,18,0));
}
.bk-page--r::before{ left:0; }
.bk-page--l::after{ right:0; transform:scaleX(-1); }

/* ---------- 移动端：棋盘与按键 ---------- */
@media (max-width:760px){
  .cell{ width:34px; height:34px; }
  .mine-wrap{ padding:4px; }
  .pad{ grid-template-columns:repeat(3, 48px); gap:8px; }
  .pad button{ height:46px; }
  .cab-side{ gap:8px 14px; }
  .readout b{ font-size:20px; }
  .overlay{ padding:12px; }
  .ov-card{ padding:16px 18px; }
  .ov-line{ font-size:16px; }
}


/* ---------- 纸张颗粒 + 装订折痕（贴近实拍书） ---------- */
.pp-page, .pp-face{
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(2.4deg, rgba(26,22,18,.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-1.6deg, rgba(26,22,18,.010) 0 1px, transparent 1px 5px);
  background-blend-mode:normal;
}
/* 靠书脊一侧的折痕：越靠近脊线越暗 */
.pp-page.l::after, .pp-page.r::before,
.bk-page--l::after, .bk-page--r::before{
  content:""; position:absolute; top:0; bottom:0; width:34px; pointer-events:none; z-index:1;
}
.pp-page.l::after, .bk-page--l::after{
  right:0; background:linear-gradient(270deg, rgba(26,22,18,.13), rgba(26,22,18,0));
}
.pp-page.r::before, .bk-page--r::before{
  left:0; background:linear-gradient(90deg, rgba(26,22,18,.13), rgba(26,22,18,0));
}
/* 书里任何地方都不许出现蓝色选区 */
.pp-book ::selection, .fp-book ::selection, .book ::selection{ background:transparent; }
.pp-book, .fp-book{ -webkit-user-select:none; user-select:none; }
.pp-book img, .fp-book img{ -webkit-user-drag:none; user-drag:none; }