/* ============ 站点外壳（游戏自身样式在 game.css，这里只管页面） ============
   两条硬约束，改这块时必须守住：
   1. **不要用裸元素选择器 main / body / a 去改游戏内部**。游戏的骨架里也有一个
      <main id="main">（棋盘那一栏），裸 `main{...}` 会连它一起命中。
      最要命的是 `margin:0 auto`：在 flex 列容器里，交叉轴上的 auto 外边距会让
      该项从 stretch 退回 fit-content，`#main` 于是变成 max-content 宽（1300px），
      比父级还宽 —— 1280 视口横向溢出 72px、手机溢出 338px。
      所以站点自己的 main 一律用 .pageMain，游戏内部一律用 #gameMount 限定。
   2. 站点样式表在 game.css **之后**加载，同特异度时后者胜。
   字体统一从游戏的 --font-body 取（构建器按语言逐页覆写），只留一处真源。 */
:root{
  --sh-bg:#05080f;
  --sh-card:linear-gradient(180deg,rgba(14,22,44,.72),rgba(10,16,32,.6));
  --sh-line:rgba(126,164,255,.14); --sh-line2:rgba(126,164,255,.3);
  --sh-cyan:#3fe0ff; --sh-violet:#a78bfa; --sh-amber:#fbbf24;
  --sh-text:#c6d4ee; --sh-dim:#7686a6; --sh-hi:#eef6ff;
  --sh-max:1280px;
  --sh-pad:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body,'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif)}
a{color:var(--sh-cyan)}
::selection{background:rgba(63,224,255,.28);color:#fff}

/* 跳转链接用 sr-only 惯用法隐藏。
   ⚠ 不能用 `left:-9999px`：绝对定位元素会把文档的可滚动溢出向左撑出近万像素，
   在 RTL 页面（dir=rtl，溢出方向本来就是左）里，绘制原点会落进那片空白——
   实测整页截图变成一块纯底色，DOM 和命中测试却都正常，极难排查。 */
.skipLink{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skipLink:focus{position:fixed;inset-inline-start:0;top:0;width:auto;height:auto;overflow:visible;
  clip:auto;clip-path:none;white-space:normal;z-index:99;background:#0b1226;color:#eef6ff;
  padding:10px 16px;border-radius:0 0 10px 0;font-size:13px}

/* ---- 顶栏：细、粘顶、半透明毛玻璃 ---- */
.siteHead{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--sh-line);
  background:linear-gradient(180deg,rgba(5,8,15,.94),rgba(5,8,15,.76));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.siteHead .shIn{max-width:var(--sh-max);margin:0 auto;padding:7px var(--sh-pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.shBrand{display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none}
.shMark{width:26px;height:26px;flex:none;filter:drop-shadow(0 0 10px rgba(63,224,255,.35))}
.shName{display:block;font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--sh-hi);white-space:nowrap}
.shTag{display:block;font-size:8.5px;letter-spacing:.3em;color:var(--sh-dim);margin-top:1px}

/* ---- 语言菜单：两列网格，比一条 20 项的长列好点得多 ---- */
.langNav{position:relative;flex:none}
.langNav>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  color:var(--sh-text);font-size:12.5px;border:1px solid var(--sh-line);border-radius:999px;
  padding:7px 13px;background:rgba(16,24,46,.7);transition:border-color .18s,color .18s}
.langNav>summary::-webkit-details-marker{display:none}
.langNav>summary::before{content:"";width:13px;height:13px;flex:none;border-radius:50%;opacity:.85;
  background:conic-gradient(from 210deg,var(--sh-cyan),var(--sh-violet),var(--sh-cyan))}
.langNav>summary:hover,.langNav[open]>summary{border-color:rgba(63,224,255,.5);color:var(--sh-hi)}
.langNav>ul{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:40;
  width:min(300px,84vw);max-height:min(64vh,470px);overflow:auto;margin:0;padding:6px;list-style:none;
  background:#0a1120;border:1px solid var(--sh-line2);border-radius:14px;
  box-shadow:0 24px 60px rgba(2,6,18,.72);
  display:grid;grid-template-columns:1fr 1fr;gap:2px}
.langNav>ul li a{display:block;padding:7px 10px;font-size:12.5px;color:var(--sh-text);
  text-decoration:none;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langNav>ul li a:hover{background:rgba(63,224,255,.10);color:var(--sh-hi)}
.langNav>ul li a[aria-current]{color:var(--sh-cyan);font-weight:700;background:rgba(63,224,255,.08)}

/* ---- 主体 ---- */
.pageMain{max-width:var(--sh-max);margin:0 auto;padding:0 var(--sh-pad)}

/* ---- 首屏 ----
   纵向能省则省：1080p 的屏要「首屏文字 + 棋盘 + 元件库」同屏，
   首屏每多 10px 空白，格子预算就少 10px（boardAvailHeight 的①档会如实扣掉）。 */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;
  padding:14px 0 2px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sh-cyan);border:1px solid rgba(63,224,255,.26);
  background:rgba(63,224,255,.07);border-radius:999px;padding:5px 13px;margin:0 0 10px}
.hero .eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--sh-cyan);box-shadow:0 0 8px var(--sh-cyan)}
.hero h1{font-size:clamp(23px,3vw,36px);line-height:1.22;color:var(--sh-hi);
  letter-spacing:-.015em;margin:0 0 8px;font-weight:700;text-wrap:balance}
.hero .tagline{font-size:15px;color:var(--sh-violet);margin:0 0 8px;letter-spacing:.01em}
/* 导语**占满文字栏**（1920 下约 920px，两行折完）：原先 62ch 锁在 527px 折四行，
   右边空一整条、游戏被顶下去——用户圈出来「太靠左」。 */
.hero p.lead{font-size:14.5px;line-height:1.82;color:var(--sh-text);margin:0}
/* 首屏不再放行动按钮：导语讲完就接游戏，中间插一个大按钮属于「替玩家做决定」。
   .btnPlay 的样式留着——404 页那颗「回首页」还在用。 */
.btnPlay{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.02em;text-decoration:none;color:#04101e;
  background:linear-gradient(96deg,#3fe0ff,#8fb3ff 52%,#c4a8ff);
  box-shadow:0 10px 30px rgba(63,224,255,.26);transition:transform .16s,box-shadow .16s}
.btnPlay::after{content:"▸";font-size:12px}
.btnPlay:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(63,224,255,.4)}
.heroArt{width:290px;height:auto;flex:none}
@media (max-width:900px){.heroArt{display:none}.hero{grid-template-columns:minmax(0,1fr);padding-top:22px}}

/* ---- 广告位 ---- */
.adSlot{margin:16px 0;min-width:0}
.adSlot[hidden]{display:none !important}          /* 未填充：完全不占地方，不留白、不 CLS */
.adSlot .adLabel{font-size:10px;letter-spacing:.22em;color:var(--sh-dim);margin:0 0 6px;text-align:center}

/* ---- 游戏挂载区 ----
   下面两条是「把单文件游戏嵌进内容页」的适配，全部用 #gameMount 限定作用域，
   单文件版一点都不受影响（改了要按 _dbg_layout_site.py 复核两边的棋盘尺寸）。
   ⚠ 这里**不再**去限 #helpBox 的高度：图鉴 18 条全展开有 1900px 高，
   以前是站点样式单方面压住它，于是「单文件版没限、站点版限了」两套行为。
   现在由游戏自己管（基础规则限 min(48vh,430px)，三栏对齐时改由 fitColumns() 给精确高度），
   站点这层只留下挂载相关的两条，样式归属不再跨界。 */
#gameMount{position:relative;z-index:2;margin:14px 0 0}
#gameMount #app{min-height:auto;max-width:none;padding:0;width:100%}

/* ---- 正文 ----
   正文区与上面的游戏区**同宽**（都吃满 .pageMain）。原来卡在 900px，在 1280 的屏上
   比游戏区窄 340px，左右两条空白带，整页像两篇文章拼起来的。
   拉到同宽之后，多列网格（术语表 / 章节卡 / 步骤）自然铺满；
   剩下的**成段文字**用 column-width 分成多栏，避免 1240px 一行读起来串行。 */
.content{margin:34px 0 0}
.content section,.content .cardBox{margin:0 0 20px;padding:24px 26px;
  border:1px solid var(--sh-line);border-radius:18px;
  background:var(--sh-card);box-shadow:0 18px 44px rgba(2,6,18,.34);
  scroll-margin-top:76px}                            /* 锚点跳转时避开粘顶栏 */
.content h2{display:flex;align-items:center;gap:10px;font-size:17.5px;color:var(--sh-hi);
  letter-spacing:.01em;margin:0 0 15px;font-weight:700}
.content h2::before{content:"";width:4px;height:17px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,var(--sh-cyan),var(--sh-violet))}
.content h3{font-size:14px;color:var(--sh-cyan);margin:0 0 7px;letter-spacing:.02em}
.content p{font-size:14.5px;line-height:1.85;color:var(--sh-text);margin:0 0 12px}
.content p:last-child{margin-bottom:0}
/* 只有成段文字需要限制行宽：column-width 在窄屏自动退化成单栏，不必写断点。
   break-inside:avoid 防止一句话被从中间劈到下一栏。 */
#intro,#privacy{column-width:420px;column-gap:34px}
#intro p,#privacy p{break-inside:avoid}

/* 分步：编号做成渐变圆片，比默认的 1. 2. 3. 好读。
   宽屏铺成多列——四个步骤一条竖排下来在 1240px 里会拉出一条很长很空的卡片。 */
.content ol.steps{counter-reset:st;list-style:none;margin:0;padding:0;
  display:grid;gap:0 30px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.content ol.steps>li{counter-increment:st;position:relative;padding-inline-start:38px;
  margin:0 0 13px;font-size:14.5px;line-height:1.75;color:var(--sh-text)}
.content ol.steps>li:last-child{margin-bottom:0}
.content ol.steps>li::before{content:counter(st);position:absolute;inset-inline-start:0;top:2px;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-num,inherit);font-size:11px;font-weight:700;color:#04101e;
  background:linear-gradient(140deg,var(--sh-cyan),var(--sh-violet))}

/* 术语表 / FAQ：用 <div class="term"> 把 dt+dd 配对，再铺成多列网格 */
.content dl{margin:0;display:grid;gap:15px 28px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.content dl .term{min-width:0}
.content dt{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--sh-hi);
  font-weight:700;margin:0 0 5px}
.content dt::before{content:"";width:6px;height:6px;border-radius:2px;flex:none;
  background:linear-gradient(140deg,var(--sh-cyan),var(--sh-violet))}
.content dd{font-size:13.5px;line-height:1.72;color:var(--sh-text);margin:0}
.content dd b{color:var(--sh-cyan);font-weight:600}
#faq dl{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
#faq dd{line-height:1.8}

/* 章节与关卡名：紧凑的胶囊网格 */
.chapters{list-style:none;margin:0;padding:0;display:grid;gap:13px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.chapters>li{border:1px solid var(--sh-line);border-radius:14px;padding:13px 15px;
  background:rgba(9,15,30,.5)}
.chapters h3{display:flex;align-items:center;gap:8px;color:var(--sh-hi);font-size:13.5px;
  margin:0 0 9px;letter-spacing:0}
.chapters h3::before{content:"W" attr(data-w);flex:none;font-family:var(--font-num,inherit);
  font-size:9.5px;letter-spacing:.06em;color:var(--sh-cyan);border:1px solid rgba(63,224,255,.3);
  background:rgba(63,224,255,.08);border-radius:5px;padding:2px 6px}
.chapters ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.chapters ul li{font-size:12.5px;line-height:1.5;color:var(--sh-text);
  background:rgba(126,164,255,.07);border-radius:6px;padding:3px 8px}

/* ---- 页脚 ---- */
.siteFoot{margin-top:36px;border-top:1px solid var(--sh-line);
  background:linear-gradient(180deg,rgba(8,13,26,.55),rgba(5,8,15,.15))}
.siteFoot .ftIn{max-width:var(--sh-max);margin:0 auto;padding:28px var(--sh-pad) 6px;
  display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
/* 用 h2 而不是 h4：页脚在正文之后，直接跳 h4 会让无障碍审计报「标题层级不连续」。
   字号由 CSS 决定，跟语义级别无关。 */
.siteFoot h2.ftH{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sh-dim);
  margin:0 0 11px;font-weight:600;display:block}
.siteFoot .ftBrand p{font-size:13px;line-height:1.7;color:var(--sh-dim);margin:10px 0 0;max-width:34ch}
.siteFoot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.siteFoot a{color:var(--sh-text);text-decoration:none;font-size:13px}
.siteFoot a:hover{color:var(--sh-cyan)}
.siteFoot .langs a{font-size:12.5px;color:var(--sh-dim)}
.siteFoot .copy{max-width:var(--sh-max);margin:22px auto 0;padding:15px var(--sh-pad) 30px;
  border-top:1px solid rgba(126,164,255,.08);font-size:12px;color:var(--sh-dim)}

@media (max-width:640px){
  :root{--sh-pad:13px}
  .content section{padding:18px 16px;border-radius:16px}
  .content dl{grid-template-columns:1fr}
  .siteFoot .ftIn{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}