/* ============================================================
   配色层 · theme.css
   在米白 #faf7f5 + 纯黑的瑞士风骨架上，加一层「克制点缀色」：
     · 每个页面 / 每张卡片一个专属强调色（data-accent）
     · 颜色只出现在 —— 导航顶部细条、logo 圆点、徽标、标签、
       序号、箭头、悬停底色、选中态、纹理字
     · 结构线（1px 黑边框）、正文黑、底色米白 一律不动
   加载顺序：必须排在各页 <style> 之后（即 </head> 前一行），
   靠「后出现的同权重规则」覆盖原有单色声明。
   ============================================================ */

/* ---------- 调色板 ----------
   --accent      : 主色（用于色块 / 徽标底 / 悬停底，配 --on-accent 保证可读）
   --accent-ink  : 文字版主色（比主色略深，保证在米白底上有足够对比）
   --on-accent   : 压在 --accent 上的字色
   --accent-lite : 压在黑底上的浅色版
   --a08 / --a14 / --a26 / --a40 : 主色的透明度阶梯，用于细线、纹理、边框
   ------------------------------------------------------------ */

/* ---------- 兜底：没有 data-accent 时的默认值 ----------
   必须写在调色板之前 —— :root 与 [data-accent] 权重相同，靠后者覆盖 */
:root{
  --accent:#5B4BD6; --accent-ink:#5646C9; --on-accent:#fff; --accent-lite:#A79DF0;
  --a08:rgba(91,75,214,.08); --a14:rgba(91,75,214,.14); --a26:rgba(91,75,214,.26); --a40:rgba(91,75,214,.40);
}

/* 首页 · 鸢尾紫 */
[data-accent="iris"]{
  --accent:#5B4BD6; --accent-ink:#5646C9; --on-accent:#fff; --accent-lite:#A79DF0;
  --a08:rgba(91,75,214,.08); --a14:rgba(91,75,214,.14); --a26:rgba(91,75,214,.26); --a40:rgba(91,75,214,.40);
}
/* 明日方舟 · 铁锈红 */
[data-accent="ak"]{
  --accent:#E23B2E; --accent-ink:#CF3227; --on-accent:#fff; --accent-lite:#F09A92;
  --a08:rgba(226,59,46,.08); --a14:rgba(226,59,46,.14); --a26:rgba(226,59,46,.26); --a40:rgba(226,59,46,.40);
}
/* 终末地 · 冰青 */
[data-accent="ef"]{
  --accent:#1E9BB8; --accent-ink:#097892; --on-accent:#fff; --accent-lite:#7FCADA;
  --a08:rgba(30,155,184,.08); --a14:rgba(30,155,184,.14); --a26:rgba(30,155,184,.26); --a40:rgba(30,155,184,.40);
}
/* 绝区零 · 荧光黄绿（浅底上字压深，深底上色提亮） */
[data-accent="zzz"]{
  --accent:#C2CE1F; --accent-ink:#6A7400; --on-accent:#16160A; --accent-lite:#E4EA8E;
  --a08:rgba(194,206,31,.08); --a14:rgba(194,206,31,.14); --a26:rgba(194,206,31,.26); --a40:rgba(194,206,31,.40);
}
/* 原神 · 青绿 */
[data-accent="gs"]{
  --accent:#2C9C93; --accent-ink:#177C75; --on-accent:#fff; --accent-lite:#86CFC8;
  --a08:rgba(44,156,147,.08); --a14:rgba(44,156,147,.14); --a26:rgba(44,156,147,.26); --a40:rgba(44,156,147,.40);
}
/* 洛克王国 · 兰紫 */
[data-accent="roco"]{
  --accent:#B154C8; --accent-ink:#A04AB8; --on-accent:#fff; --accent-lite:#DFA8EC;
  --a08:rgba(177,84,200,.08); --a14:rgba(177,84,200,.14); --a26:rgba(177,84,200,.26); --a40:rgba(177,84,200,.40);
}
/* 重返未来 1999 · 复古金棕 */
[data-accent="rev"]{
  --accent:#A97A3C; --accent-ink:#91652A; --on-accent:#fff; --accent-lite:#D7BC8C;
  --a08:rgba(169,122,60,.08); --a14:rgba(169,122,60,.14); --a26:rgba(169,122,60,.26); --a40:rgba(169,122,60,.40);
}
/* 画廊 · 玫瑰 */
[data-accent="gallery"]{
  --accent:#D84A6E; --accent-ink:#C6375C; --on-accent:#fff; --accent-lite:#F0A0B4;
  --a08:rgba(216,74,110,.08); --a14:rgba(216,74,110,.14); --a26:rgba(216,74,110,.26); --a40:rgba(216,74,110,.40);
}
/* 其他游戏列表 · 橙 */
[data-accent="games"]{
  --accent:#E2622F; --accent-ink:#C34312; --on-accent:#fff; --accent-lite:#F3A98A;
  --a08:rgba(226,98,47,.08); --a14:rgba(226,98,47,.14); --a26:rgba(226,98,47,.26); --a40:rgba(226,98,47,.40);
}

/* 没有 data-accent 时的兜底已写在文件顶部（:root），此处不再重复 */

/* ============ 全局 ============ */
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============ 导航 ============ */
/* 顶部 3px 细条：整站唯一一条贯穿的彩色，作为「色标」 */
.navContainer{box-shadow:inset 0 3px 0 0 var(--accent)}
.navLogo .logoDot{background:var(--accent)}
.navTrigger.current{text-decoration-color:var(--accent)}
.navMenu a:hover{background:var(--accent);color:var(--on-accent)!important}
.navMenu a .tag{color:var(--accent-ink);opacity:.92}
.navMenu a:hover .tag{color:var(--on-accent);opacity:.7}
.navMenu a.current{background:var(--a08)}
.langSwitch button.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.langSwitch button:not(.active):hover{background:var(--a08)}
.hamburger{border-color:var(--accent)}
.hamburger span{background:var(--accent)}

/* 移动端抽屉 */
.mobileItem:active,.mobileItem:hover{background:var(--accent);color:var(--on-accent)}
.mobileGroup{color:var(--accent-ink)}

/* 分享按钮（share.css 注入的元素）：描边款，避免和语言切换并排时两块实色打架 */
.shareTrigger{background:transparent;border-color:var(--accent);color:var(--accent-ink)}
.shareTrigger:hover,.shareTrigger:focus-visible{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.shareTitle{color:var(--accent-ink)}
.shareAct.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.shareAct.primary:hover{background:#faf7f5;color:var(--accent-ink)}

/* ============ 首页 Hero ============ */
/* 背景大字纹理：从纯黑 8% 换成主色 8%，远看仍是灰调，近看有色温 */
.patternRow{color:var(--a08)}
.patternText:hover{color:var(--a14);text-shadow:0 0 20px var(--a08)}
/* 黑底聚光层上的 ABOUT 标签用浅色版，避免在纯黑上发闷 */
.aboutLabel{color:var(--accent-lite)}

/* ============ 首页 · 关于我 ============ */
.contentCard{border-left:3px solid var(--accent)}
.siteListHead>span:first-child{color:var(--accent-ink)}
.siteRow:hover .siteName{color:var(--accent-ink)}
.siteRow:hover .siteArrow{color:var(--accent-ink)}
.backHint{letter-spacing:.12em}

/* ============ Hero 标题区（详情页 / 列表页 / 画廊） ============ */
.akSub,.gdSub{color:var(--accent-ink)}
.akHero,.gdHero{background-image:radial-gradient(120% 90% at 50% 0%,var(--a08),transparent 60%)}

/* ============ Section 标题 ============ */
.headerTitle h2::before{content:'';display:inline-block;width:9px;height:9px;margin-right:16px;background:var(--accent);transform:translateY(-3px)}

/* ============ 游戏卡片（games.html） ============ */
.cardBadge{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.gameCard:hover .cardBadge{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.cardIdCopy{border-color:var(--accent);color:var(--accent-ink)}
.cardIdCopy:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.statChip{color:var(--accent-ink);border-color:var(--a26)}
.gameCard:hover .statChip{color:var(--accent-lite);border-color:var(--a40)}
.cardMoreArr{color:var(--accent-ink)}
.gameCard:hover .cardMoreArr{color:var(--accent-lite)}
.cardMore{border-top-color:var(--a26)}
.gameCard:hover .cardMore{border-top-color:var(--a40)}

/* ============ 详情页 · ID 卡 / 信息行 ============ */
/* 大面积色块容易压过黑白骨架，改用「浅色底 + 彩色文字 + 彩色序号块」 */
.idCard:hover{background:var(--a08);color:#000}
.idCard:hover .v{color:var(--accent-ink)}
.idCard:hover .k,.idCard:hover .copyHint{color:var(--accent-ink);opacity:.85}
.idCard.copied .copyHint{color:var(--accent-ink)}
.idCard.copied:hover .copyHint{color:var(--accent-ink)}
.row:hover{background:var(--a14)}
.row:hover .rowIdx{background:var(--accent);border-right-color:var(--accent)}
.row:hover .rowIdx span{color:var(--on-accent);opacity:.85}
.row:hover .rowKey{color:var(--accent-ink)}
.row:hover .rowVal{color:#444}

/* 评价框：左侧色条 + 彩色引号 + 彩色标签 */
.reviewBox{border-left:3px solid var(--accent)}
.reviewMark{color:var(--a26)}
.rmItem{color:var(--accent-ink);border-color:var(--a26)}
.shotCaption span:first-child{color:var(--accent-ink)}

/* ============ 相关游戏 / 返回 ============ */
.relCard:hover{background:var(--accent);color:var(--on-accent)}
.backRow:hover{background:var(--accent);color:var(--on-accent)}
.mimoFooter span::before{content:'';display:inline-block;width:6px;height:6px;margin-right:9px;background:var(--accent);transform:translateY(-1px)}

/* ============ 画廊 ============ */
.wallGame{color:var(--accent-ink);opacity:.8}
.wallIdx{color:var(--accent-ink);opacity:.7}
.wallCard:hover .wallMeta{background:var(--accent);color:var(--on-accent)}
.wallCard:hover .wallIdx,.wallCard:hover .wallGame{color:var(--on-accent);opacity:.75}
.wallFrame .zoomHint{background:var(--accent);color:var(--on-accent)}
.wallCard:hover .zoomHint{background:var(--accent);color:var(--on-accent)}

/* 灯箱 */
.lbBtn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lbIdx{color:var(--accent-lite)}

/* ============ 弱化动效偏好 ============ */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}