/* Minesweeper Guide — 站点样式。
*
* 和 minesweeper.css 分开：那份只管棋盘，这份只管文章壳子。
* 分开的理由不是洁癖 —— 游戏组件将来可能被别的页面/别的站复用，
* 混在一起就意味着复用时要拖一整套排版规则进来。
*
* 🔴 不引任何外部字体、不引任何 CDN。
* 一个 到 fonts.googleapis.com 会给每次首屏加一次 DNS + TLS + 往返，
* 而系统字体栈在所有平台上都是零延迟且已经很好看。这站的核心指标是
* 「能不能被搜到 + 打开就能玩」，任何阻塞渲染的第三方请求都是负分。
*/
:root {
/* 亮色。文字不用纯黑：#1a1d21 在白底上对比度足够（>12:1），
但没有纯黑那种刺眼的边缘感，长文阅读更省力。 */
--bg: #ffffff;
--bg-soft: #f6f7f9;
--fg: #1a1d21;
--fg-muted: #5c6470;
--border: #e3e6ea;
--accent: #1558b0;
--accent-soft: #eaf1fb;
--radius: 8px;
/* 正文行宽。65-75 字符是长期被印刷和排版研究认可的可读区间，
这里用 ch 单位直接表达「多少个字符」，改字号时行宽自动跟着走，
不会像写死 px 那样在大字号下变成 40 字符一行。 */
--measure: 68ch;
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
"Liberation Mono", monospace;
}
/* 暗色模式跟随系统，不做手动开关。
开关意味着要存偏好、要在首屏前读回来、要处理闪白 —— 一套本站不需要的复杂度。 */
@media (prefers-color-scheme: dark) {
:root {
--bg: #14171a;
--bg-soft: #1c2026;
--fg: #e6e9ed;
--fg-muted: #9aa4b0;
--border: #2b3138;
--accent: #7fb3ff;
--accent-soft: #1e2937;
}
}
*, *::before, *::after { box-sizing: border-box; }
html {
/* 站内锚点跳转时不要把标题贴到窗口顶边紧挨着 sticky 头。 */
scroll-padding-top: 5rem;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
/* 16px 是移动端 Safari 不触发自动缩放的下限，正文别再小了。 */
font-size: 1.0625rem;
line-height: 1.7;
/* 长英文单词（比如 "intermediate"）在窄屏下不至于撑破容器。 */
overflow-wrap: break-word;
}
/* ── 骨架 ───────────────────────────────────────────────── */
.wrap {
width: 100%;
max-width: 46rem;
margin: 0 auto;
padding: 0 1.25rem;
}
/* 正文列单独收窄到 --measure，而壳子（页头/页脚/游戏区）可以更宽。
如果整站统一按 68ch 收窄，expert 难度 30 列的棋盘会被挤到要横向滚动。 */
.prose { max-width: var(--measure); }
/* 键盘用户的逃生门。默认藏在视窗外，聚焦时才滑进来 ——
用 visually-hidden 而不是 display:none，因为后者会让它无法被聚焦。 */
.skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--accent);
color: #fff;
padding: .6rem 1rem;
z-index: 100;
}
.skip:focus { left: 0; }
/* ── 页头 / 导航 ────────────────────────────────────────── */
.site-head {
border-bottom: 1px solid var(--border);
background: var(--bg);
}
.head-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem 1.5rem;
padding-top: .9rem;
padding-bottom: .9rem;
}
.brand {
font-weight: 700;
font-size: 1.0625rem;
color: var(--fg);
text-decoration: none;
letter-spacing: -.01em;
white-space: nowrap;
}
.brand:hover { color: var(--accent); }
.nav {
display: flex;
flex-wrap: wrap;
gap: .25rem 1.1rem;
margin-left: auto;
font-size: .9375rem;
}
.nav a {
color: var(--fg-muted);
text-decoration: none;
padding: .2rem 0;
border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--fg); }
/* 当前页在导航里要看得出来，否则用户在多页站里会失去方位感。 */
.nav a[aria-current="page"] {
color: var(--fg);
font-weight: 600;
border-bottom-color: var(--accent);
}
/* ── 正文排版 ───────────────────────────────────────────── */
main { padding: 2.25rem 0 3rem; }
h1, h2, h3 {
line-height: 1.25;
letter-spacing: -.015em;
/* 标题上方留白远大于下方：视觉上把标题「绑」到它统领的段落，
而不是浮在两块内容中间让人分不清它属于上还是下。 */
margin: 2.25em 0 .6em;
text-wrap: balance;
}
h1 { font-size: 2rem; margin-top: 0; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1.15em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.4em; }
li { margin: .3em 0; }
li > ul, li > ol { margin-top: .3em; margin-bottom: .3em; }
strong { font-weight: 650; }
code {
font-family: var(--font-mono);
font-size: .875em;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 4px;
padding: .1em .35em;
}
pre {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: .9rem 1rem;
/* ASCII 棋盘图在窄屏下必须能横向滚，绝不能换行 —— 换行了图就废了。 */
overflow-x: auto;
margin: 0 0 1.3em;
line-height: 1.45;
}
pre code {
background: none;
border: 0;
padding: 0;
font-size: .8125rem;
white-space: pre;
}
blockquote {
margin: 0 0 1.3em;
padding: .1rem 0 .1rem 1rem;
border-left: 3px solid var(--border);
color: var(--fg-muted);
}
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
/* 表格。窄屏靠外层 .table-wrap 横向滚动，
不用「移动端把表格重排成卡片」那套 —— 那需要 data-label 属性，
而我们的表格是 Markdown 生成的，没有地方挂那些属性。 */
.table-wrap { overflow-x: auto; margin: 0 0 1.3em; }
table {
border-collapse: collapse;
width: 100%;
font-size: .9375rem;
}
th, td {
border: 1px solid var(--border);
padding: .5rem .7rem;
text-align: left;
vertical-align: top;
}
th { background: var(--bg-soft); font-weight: 650; }
/* ── 游戏区 ─────────────────────────────────────────────── */
.game-block {
margin: 0 0 2.5rem;
padding: 1.25rem 0 0;
}
.game-block h2 { margin-top: 0; }
/* 难度切换。用 而不是