/* ==========================================================================
   Games 阅读页目录（TOC）共享层 — 2026-09-15
   --------------------------------------------------------------------------
   背景：各游戏站的 .toc 目录存在两类缺陷
     D1 目录内容由 main.js 注入 → 禁用 JS 时目录完全空白
     D2 crimson(<=960)/palworld(<=900) 窄断点 .toc{display:none} → 手机无页内导航

   本层负责：
     1. 桌面：维持各站原有侧栏布局（不改变既有视觉）
     2. 窄断点：.toc 不再消失，改为原生 <details> 折叠态，无 JS 也能手动展开
     3. details 版式（扁平 .toc 列表）在桌面也能正常显示
     4. 页面 H1 区（.page-head）—— 修复 33 个页面原本没有 H1 的结构缺陷

   命名空间：本文件只被阅读页引入，因此使用具体类名收束，避免跨站误伤。
   各游戏保留自己的配色：此处只定义排版与层级，颜色一律 inherit / 走 CSS 变量。
   ========================================================================== */

/* ---------- 页面 H1 区（新增，修复缺 H1） ---------- */
/* 不覆盖各站 .hero h1 的既有设计；只负责面包屑与正文之间的位置感。 */
.page-head { margin: 6px 0 18px; }
.page-head > h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3.6vw, 2.15rem);
  line-height: 1.25;
  font-weight: 700;
  color: inherit;
}
@media (max-width: 640px) {
  .page-head { margin: 4px 0 14px; }
  .page-head > h1 { font-size: 1.55rem; }
}

/* ---------- 版式 B：<details class="toc toc-details"> 扁平目录 ---------- */
.toc-details {
  display: block;
}
.toc-details > summary {
  cursor: pointer;
  list-style: none;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: inherit;
  opacity: .78;
  padding: 4px 6px;
  border-radius: 6px;
}
.toc-details > summary::-webkit-details-marker { display: none; }
.toc-details > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  transition: transform .15s ease;
}
.toc-details[open] > summary::before { transform: rotate(90deg); }
.toc-details > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.toc-details > ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

/* ---------- 版式 A：<aside class="toc"> 包进 details（移动端折叠） ---------- */
/* 桌面：details 常显，隐藏 summary，恢复纯侧栏外观 */
.toc-details > ul { margin-left: 0; }
@media (min-width: 961px) {
  aside .toc-details > summary { display: none; }
}

/* 窄断点：不再隐藏 .toc；改为紧凑折叠面板，读者点一下就能展开 */
@media (max-width: 960px) {
  .toc { display: block; position: static; max-height: none; overflow: visible; }
  aside.toc { margin-bottom: 4px; }
  .toc-details > summary { display: block; font-size: .82rem; padding: 8px 10px; }
  .toc-details > ul { margin-top: 4px; }
  /* 手机端目录链接加大点击热区 */
  .toc-details > ul a,
  .toc-details > a { padding: 8px 10px; }
}

/* 超窄屏：确保不产生横向滚动 */
@media (max-width: 420px) {
  .toc-details > ul a,
  .toc-details > a { font-size: .84rem; }
}