:root {
    --bg: #f5f0e8;
    /* 页面底色 */
    --bg-code: #efe6d8;
    /* 代码块底色 */
    --border: #e0d5c4;
    /* 边框 */
    --muted: #6b6155;
    /* 次要文字色（代码块复制按钮、游戏控制栏） */
    --link: rgb(181, 84, 84);
    /* 链接色（顶部导航、GAME 页的「更多」按钮） */
}

/* 定义字体 */
@font-face {
    font-family: 'zpix';
    src: url('./assets/fonts/zpix.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* JetBrains Mono Bold（拉丁子集，仅 22KB），字符画用 —— 锁定渲染，不依赖系统字体 */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('./assets/fonts/jetbrains-mono-700.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


body {
    font-family: "SF Mono", "Fira Code", "Fira Mono", -apple-system, sans-serif;

    margin: 2em;
    line-height: 1.3em;

    word-wrap: break-word;

    font-size: 9.5pt;

    /* 阅读友好的底色 */
    background-color: var(--bg);
}

/* 顶部导航：滚动时固定在页面最顶部 */
.home-link {
    position: sticky;
    top: 0;
    background: var(--bg);
    font-family: 'JetBrains Mono';
}

.home-link a {
    color: var(--link);
    text-decoration: none;
}

/* 导航栏当前页高亮（header.js 条件渲染时自动加上） */
.home-link a.active {
    font-weight: bold;
    text-decoration: underline;
}

/* 通用 */

/* 代码块 */
pre {
    position: relative;
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.8em 1em;
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.5;
}

/* 代码块右上角的复制按钮（见 lib/code-copy.js） */
.code-copy {
    position: absolute;
    top: 0.4em;
    right: 0.4em;
    font: inherit;
    font-size: 0.75em;
    line-height: 1;
    padding: 0.35em 0.6em;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    /* 平时淡一点，鼠标移上去或聚焦时变清楚；不写成 hover 才显示，触屏设备也要能点到 */
    opacity: 0.45;
    transition: opacity 0.15s;
}

pre:hover .code-copy,
.code-copy:focus {
    opacity: 1;
}

.code-copy.is-ok {
    color: #3d7a3d;
    border-color: #3d7a3d;
    opacity: 1;
}

/* 行内代码 */
code {
    font-family: "SF Mono", "Fira Code", "Fira Mono", monospace;
    background: var(--bg-code);
    border-radius: 3px;
    padding: 0.15em 0.4em;
    font-size: 0.9em;
}

pre code {
    background: none;
    padding: 0;
    font-size: 1em;
}

/* 高亮主题自带白色背景，这里透明掉，用 pre 的暖色底 */
pre code.hljs {
    background: transparent;
    padding: 0;
}

/* 文章里的图片／视频（相册里的视频见 pages/photo.js，同宽度同圆角） */
#content img,
#content video {
    max-width: min(480px, 100%);
    width: auto;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* 相册里「一卡多图」：横向滑动条（pages/photo.js 里 url 写成数组时用）。
   每项按「塞得进 卡片宽 × 这个高度」等比缩：不会变形，也不会宽到看不全 */
#content .strip {
    --strip-height: min(360px, 62vw);
    display: flex;
    align-items: center;
    /* 矮一点的那项（比如 16:9 的视频）垂直居中，不贴在顶上 */
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* 滑到头不要触发浏览器的返回手势 */
    scrollbar-width: none;
    /* 滚动条藏起来：右边漏出半张图已经是「能滑」的提示了 */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

#content .strip::-webkit-scrollbar {
    display: none;
    /* Chrome / Safari / Edge */
}

/* 宽的上限（480px）上面的 #content img 已经有了，这里只再加个高度上限 ——
   两个都是上限时，浏览器会等比缩到刚好塞进去（定死宽 + 高才会把比例夹坏） */
#content .strip img,
#content .strip video {
    flex: 0 0 auto;
    /* 不被 flex 压窄 */
    width: auto;
    height: auto;
    max-height: var(--strip-height);
    scroll-snap-align: start;
}

/* ---------- GAME 页（见 pages/game.js）---------- */

/* GAME 页的「更多」按钮：跟顶部导航一个调子（红字、无边框、悬停加下划线）。
   font: inherit 是必须的 —— button 默认不继承字体，不写这句就不是 GAME 页的像素字体 */
#game-list button {
    font: inherit;
    color: var(--link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

/* 还没做的游戏：没有 page 字段，渲染成不带 href 的 <a>（不可点） */
#game-list a:not([href]) {
    color: var(--muted);
    cursor: default;
}

/* 整个 section 用像素字体 */
:has(#game.active) #content {
    font-family: 'zpix', sans-serif;
}

/* 模态。宽度 = 游戏宽度（--game-w 由 pages/game.js 按 GAMES 里的数据设），窄屏时缩到视口内。
   注意 box-sizing 是默认的 content-box：width 就是内容盒宽度，所以 iframe 的 100% 正好等于游戏宽度。
   刻意不加 border / border-radius：
   - border 叠在深色 backdrop 上会形成一圈“像阴影的边框”
   - border-radius 会把 iframe 的四个角切掉，跟画面本身的直角不一致 */
dialog.game-dialog {
    width: min(var(--game-w, 800px), calc(100vw - 2em));
    padding: 0;
    /* 盖掉 UA 默认的 1em */
    border: none;
    /* 盖掉 UA 默认的 border: solid */
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    /* 只为裁掉 iframe 的 focus outline（画在 border box 外面）。
       不加的话焦点环会从 dialog 外面露出来 */
    overflow: hidden;
}

.game-dialog::backdrop {
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(4px);
}

/* 控制栏：标题 + 关闭按钮 */
.game-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 6px 5px 14px;
    background: var(--bg-code);
    border-bottom: 1px solid var(--border);
    font-family: 'JetBrains Mono';
    font-size: 0.82em;
    color: var(--muted);
}

/* 关闭按钮。跟代码块的复制按钮（.code-copy）一个调子：平时淡、悬停变清楚 */
.game-close {
    font: inherit;
    line-height: 1;
    padding: 0.3em 0.55em;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.game-close:hover,
.game-close:focus {
    opacity: 1;
}

/* 游戏画布。
   两个坑：
   1) iframe 自带 2px inset 边框，不重置的话看着像一圈内阴影
   2) 不要写 height:auto —— 会覆盖 width/height 属性的表现，高度塌成 UA 默认的 150px。
      用 aspect-ratio 保持比例 */
.game-frame {
    display: block;
    /* iframe 默认是 inline，会多出基线间隙 */
    width: 100%;
    aspect-ratio: var(--game-ratio, 16 / 9);
    border: 0;
    /* 盖掉浏览器默认的 2px inset */
    background: #000;
    /* 加载期间的占位色，跟游戏页面底色一致 */
}