/* 造界 · 前台皮肤层（2026-11-03）
放置：与 style.css 同目录，加载顺序在 style.css 之后。
<- 本文件
启用：，由 skin-boot.js 在 里设置。
不设 data-skin 时，前台【完全等于现在的样子】——本文件零影响，可随时下线。
本文件只做两件事，都不碰布局：
1) 覆盖 :root 上已有的 token（颜色 / 圆角 / 阴影），复用 style.css 里所有组件
2) 皮肤特有的少量质感微调，全部带 :root[data-skin="…"] 前缀，互不干扰
token 清单与 style.css:3-30 一一对应，没有新增体系，也没有新增组件。 */
/* ============================================================
A｜纸本 · 编辑部（候选默认）
情绪：杂志排版、相纸边、发丝线分隔、无投影。
适用：146 张深色游戏截图贴在暖白纸上，靠"印刷品"的秩序把杂色收住。
============================================================ */
:root[data-skin="paper"] {
color-scheme: light;
--bg: #f4f1e9; --bg-2: #ece7dc;
--panel: #fbfaf6; --panel-2: #ffffff;
--dark: #101714; --dark-2: #17211d;
--line: #dcd7cc; --line-strong: #b9b4aa;
--text: #171b18; --muted: #59615c; --subtle: #737c76;
--accent: #d65d35; --accent-2: #b84a27;
--accent-tint: #f8e6dc; --on-accent: #ffffff;
/* 实心按钮底色：--accent 上压白字只有 3.84:1，不够 4.5，用一个更深的同色相打底（4.73:1）。
大字/描边/色点仍用 --accent，观感不变。 */
--accent-solid: #c1502b;
--radius: 8px; --radius-sm: 6px;
--shadow: 0 1px 2px rgba(63, 54, 41, 0.05), 0 10px 22px rgba(63, 54, 41, 0.06);
}
/* 相纸边：封面四周留 6px 白卡纸，模拟印刷品贴片 */
:root[data-skin="paper"] .tile {
padding: 6px;
background: var(--panel-2);
box-shadow: 0 0 0 1px var(--line);
border-radius: var(--radius);
}
:root[data-skin="paper"] .tile img,
:root[data-skin="paper"] .tile .ph {
inset: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
border-radius: calc(var(--radius) - 3px);
}
:root[data-skin="paper"] .tile:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 1px var(--line-strong), 0 14px 26px rgba(63, 54, 41, 0.12);
}
/* .cap 是绝对定位到 .tile 上的，而相纸边把封面缩进了 6px —— 不同步 inset 的话，
标题会压在相纸白边上，像贴歪了。这里把 .cap 也收进封面区域。 */
:root[data-skin="paper"] .tile .cap {
left: 6px; right: 6px; bottom: 6px;
border-radius: 0 0 calc(var(--radius) - 3px) calc(var(--radius) - 3px);
}
/* A 里标题压在封面下方更耐读，但 .cap 是绝对定位的渐变层，这里只把渐变压低一档，
让深色截图上的白字不用和封面抢注意力（结构不变，仍是 .cap） */
:root[data-skin="paper"] .tile .cap {
background: linear-gradient(to top, rgba(10, 15, 13, 0.9) 0%, rgba(10, 15, 13, 0.78) 42%, rgba(10, 15, 13, 0.30) 76%, rgba(10, 15, 13, 0) 100%);
}
/* ============================================================
B｜霓虹 · 游戏厅（深色）
情绪：屏幕光、聚焦、一局一局的节奏。
适用：封面本身多是深色游戏内截图，深底把它们"接"进版面，而不是贴在纸上。
============================================================ */
:root[data-skin="neon"] {
color-scheme: dark;
--bg: #0b0f12; --bg-2: #0e1418;
--panel: #141b1f; --panel-2: #1a2328;
--dark: #070b0e; --dark-2: #111a1f;
--line: #26313a; --line-strong: #3a4a55;
--text: #e7ecea; --muted: #9aa6ad; --subtle: #6d7a81;
--accent: #ff6a3d; --accent-2: #ff8a63;
--accent-tint: rgba(255, 106, 61, 0.14); --on-accent: #14070a;
--accent-solid: #ff6a3d; /* 深字压在橙上 7:1+，不需要另调 */
--radius: 14px; --radius-sm: 10px;
--shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 50px rgba(0, 0, 0, 0.55);
}
/* 顶部一层极暗的橙色光晕，让"页面顶端"有个光源，而不是纯黑一块 */
:root[data-skin="neon"] body {
background-image: radial-gradient(120% 62% at 50% 0%, rgba(255, 106, 61, 0.09), transparent 68%);
background-repeat: no-repeat;
}
:root[data-skin="neon"] .tile {
box-shadow: 0 0 0 1px var(--line);
}
:root[data-skin="neon"] .tile:hover {
transform: translateY(-3px);
box-shadow: 0 0 34px rgba(255, 106, 61, 0.30), 0 0 0 1px rgba(255, 106, 61, 0.45) inset;
z-index: 2;
}
:root[data-skin="neon"] .tile:hover img { filter: brightness(1.1); }
/* 深底上不用再压一层黑渐变，标题直接托在封面下缘即可 */
:root[data-skin="neon"] .tile .cap {
background: linear-gradient(to top, rgba(6, 9, 11, 0.92) 0%, rgba(6, 9, 11, 0.62) 52%, rgba(6, 9, 11, 0) 100%);
}
/* ============================================================
C｜像素 · 工坊（浅色 + 硬边）
情绪：可改造、可拼装、动手感；用 2px 圆角 + 硬投影当"零件"。
适用：专题/活动页试水；不做全站默认。
============================================================ */
:root[data-skin="pixel"] {
color-scheme: light;
--bg: #f2f3ec; --bg-2: #e9ebe2;
--panel: #fbfbf7; --panel-2: #ffffff;
--dark: #2b4a3f; --dark-2: #1b211d; /* 顶栏用墨绿结构色，跟正文区分 */
--line: #c3c8be; --line-strong: #1b211d;
--text: #1b211d; --muted: #5b665f; --subtle: #77817a;
--accent: #ff8a3d; --accent-2: #e0701f;
--accent-tint: #fdeee0; --on-accent: #1b211d;
--accent-solid: #ff8a3d; /* 深字压在橙上 7:1+，不需要另调 */
--radius: 2px; --radius-sm: 2px;
--shadow: 4px 4px 0 #1b211d;
}
/* 工坊网格纸：120px 主格 + 24px 次格，只在页面底色上，不影响卡片 */
:root[data-skin="pixel"] body {
background-image:
linear-gradient(rgba(43, 74, 63, 0.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(43, 74, 63, 0.10) 1px, transparent 1px),
linear-gradient(rgba(43, 74, 63, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(43, 74, 63, 0.05) 1px, transparent 1px);
background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
:root[data-skin="pixel"] .tile {
box-shadow: 2px 2px 0 var(--line-strong);
border-radius: 2px;
}
/* hover = 硬偏移，不是悬浮：卡片往左上错 2px，影子变成 4px —— 手感像"拿起一块零件" */
:root[data-skin="pixel"] .tile:hover {
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--line-strong);
z-index: 2;
}
/* 右上 12px 斜切角 */
:root[data-skin="pixel"] .tile {
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
:root[data-skin="pixel"] .pill,
:root[data-skin="pixel"] .btn { border-radius: 2px; }
:root[data-skin="pixel"] .pill { border-color: var(--line-strong); }
/* 标签与元信息走等宽，和"工坊"的工具感对齐 */
:root[data-skin="pixel"] .tile .cap span,
:root[data-skin="pixel"] .catn,
:root[data-skin="pixel"] .kicker,
:root[data-skin="pixel"] .meta { font-family: "Cascadia Code", Consolas, "Courier New", monospace; letter-spacing: 0.02em; }
/* ============================================================
三套皮肤共用：实心强调元素
—— 修法（token `--accent-solid`）已提回 style.css:20-23，由 .pill.lime /
.btn.primary / .btn.lime / .tile .play-btn 直接引用。
这里不再重复声明：两处各写一半，以后只会改到其中一处。
============================================================ */
/* 智造横幅（style.css 里那块深条）的皮肤微调：
neon 的 --dark(#070b0e) 比页面底(#0b0f12)还深，只靠色差几乎看不出边界 —— 补一道细橙线与微渐变；
pixel 的 --dark 就是顶栏那个墨绿，和"零件"语言对齐，给它硬投影而不是圆角柔影。 */
:root[data-skin="neon"] .remix-band {
background: linear-gradient(180deg, #101a20, #090f12);
box-shadow: inset 0 0 0 1px rgba(255, 106, 61, 0.18);
}
:root[data-skin="pixel"] .remix-band { box-shadow: 2px 2px 0 var(--line-strong); }
/* paper：横幅**不**沿用 --dark。
style.css 里那条注释的初衷是"和顶栏同一材质，一眼看出这是另一条语义的入口"，
这在深色皮（neon/pixel）里成立；但在纸本里顶栏本身就是深色报头，
横幅紧贴在它下面、同为 #101714，两条就近得像把报头加厚了一层 ——
1440px 下这块是 1096×148 的纯黑，右侧还空着，视觉上就是"第二条黑条"。
改法：做成"纸上的一张便笺"——比画布深一档的底色 + 发丝线，正文回到 --text，
用强调色的 kicker 和橙色按钮保持"入口"的身份，而不是靠黑底。 */
:root[data-skin="paper"] .remix-band {
--rb-ink: var(--text);
--rb-ink-2: var(--muted);
background: var(--panel-2);
box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--accent);
}
/* 便笺里的白色半透明描边/分隔在浅底上会消失，逐个换成墨色系 */
:root[data-skin="paper"] .rb-kick {
background: var(--accent-tint);
box-shadow: inset 0 0 0 1px rgba(214, 93, 53, 0.3);
color: var(--accent-2);
}
:root[data-skin="paper"] .rb-pick { border-top-color: var(--line); }
:root[data-skin="paper"] .rb-item img,
:root[data-skin="paper"] .rb-item .ph { background: var(--bg); }
:root[data-skin="paper"] .rb-list::-webkit-scrollbar-thumb { background: rgba(23, 27, 24, 0.22); }
/* ============================================================
A 的展示字体：标题走衬线、正文保持无衬线
——"编辑部"这件事主要靠标题的字形差，不靠配色。
先用系统衬线（思源宋体 / 宋体 / Georgia），零下载；
子集化字体（约 300KB）上线后，把第一项换成 @font-face 的 family 即可，
后面的系统字体保留作兜底。
============================================================ */
:root[data-skin="paper"] {
--display-font: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
}
:root[data-skin="paper"] .section-head h2 {
font-family: var(--display-font);
font-size: 21px;
font-weight: 700;
letter-spacing: 0.01em;
}
:root[data-skin="paper"] .about h2,
:root[data-skin="paper"] .card h3,
:root[data-skin="paper"] .rb-copy h2 { font-family: var(--display-font); font-weight: 700; }
/* ============================================================
皮肤切换器（顶栏按钮 + 弹出面板）
这块不是"皮肤"，是皮肤的选择器 —— 所以不带 :root[data-skin] 前缀：
用户关掉皮肤（?skin=off）时也要能点开、再切回来。
============================================================ */
.skin-btn svg { width: 18px; height: 18px; }
.skin-menu {
position: fixed; top: calc(var(--top) - 4px); right: 14px; z-index: 80;
width: 248px; padding: 8px; border-radius: 14px;
background: var(--panel-2); border: 1px solid var(--line);
box-shadow: 0 16px 40px rgba(20, 24, 20, 0.18);
}
.skin-menu[hidden] { display: none; }
.skin-menu-t {
margin: 2px 0 8px; padding: 0 6px;
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.skin-opt {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 8px; border: 0; border-radius: 9px;
background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.skin-opt:hover { background: var(--bg-2); }
.skin-opt.on { background: var(--accent-tint); }
.skin-opt.on .skin-txt b { color: var(--accent-2); }
.skin-opt .skin-txt { display: grid; gap: 1px; min-width: 0; }
.skin-opt .skin-txt b { font-size: 14px; font-weight: 700; }
.skin-opt .skin-txt em { font-style: normal; font-size: 12px; color: var(--muted); }
/* 三块小色板：左半是这套皮肤的纸色，右半是它的主色 —— 比写"配色"两个字直观 */
.skin-dot { width: 24px; height: 24px; border-radius: 7px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14) inset; }
.skin-dot[data-dot="paper"] { background: linear-gradient(135deg, #f4f1e9 0 50%, #d65d35 50% 100%); }
.skin-dot[data-dot="neon"] { background: linear-gradient(135deg, #0b0f12 0 50%, #ff6a3d 50% 100%); }
.skin-dot[data-dot="pixel"] { background: linear-gradient(135deg, #f2f3ec 0 50%, #ff8a3d 50% 100%); border-radius: 2px; }
@media (max-width: 860px) {
.skin-menu { right: 10px; width: min(248px, calc(100vw - 20px)); }
.skin-btn { padding: 0 10px; }
}
/* ============================================================
减少动态：三套皮肤共用
（style.css:367 已有全局兜底，这里只补 transform/box-shadow 的瞬时跳变）
============================================================ */
@media (prefers-reduced-motion: reduce) {
.tile, .tile img { transition: none !important; }
.tile:hover { transform: none !important; }
}