/* 生产版（由本地 demo 版构建，已去掉 ?look 开关）—— 构建于 2026-10-06 */
/* ============================================================================
 * 游戏库加载骨架（**本机预览，未上线**）—— 与 qdm-loading-20261006.js 配套
 *
 * 问题（2026-10-06 实测）：
 *   点「游戏库」之后，页面在 ~6.4 秒内是**一大片空白**（React 先渲染一个空的栅格，
 *   board 层再去拉两个大接口：xzw_game_genre 100 条 + xzw_game 100 条 _embed，
 *   实测响应 326KB + 316KB，服务器出口带宽只有 50~90KB/s）→ 用户以为"点了没反应"。
 *
 * 做法：在库相关路由上先挂 `html[data-qdm-lib-wait]`，显示一块骨架（标题条 + 卡片占位，
 *       带流动高光），同时把 React 那个空栅格收起来；真内容一出现（库目录/库卡片渲染好）
 *       就撤掉属性、移除骨架。骨架尺寸照抄真内容的栅格，切换时不跳版。
 * ========================================================================== */

/* 等待期间：把 React 先渲染出来的空栅格收起来（它是空的，留着反而像坏了） */
:root[data-qdm-lib-wait] .content-column > .articles-grid { visibility: hidden; }

/* 骨架本体：**放在 .page-shell 外面**（框架加载期会把整个 page-shell 设成 visibility:hidden，
   放在里面会跟着被藏掉 —— 2026-10-06 实测踩过）。所以它是 .site 的直接子元素，
   自己按站点容器宽度居中，并强制可见，不受那条隐藏规则影响。 */
:root .qdm-lib-skeleton { display: none; }
:root[data-qdm-lib-wait] .qdm-lib-skeleton {
  display: block;
  visibility: visible !important;
  width: calc(100% - 48px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 0 40px;
}

:root .qdm-lib-skeleton-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  margin: 0 0 22px;
}
:root .qdm-lib-skeleton-head i {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .10);
}
:root .qdm-lib-skeleton-head b {
  display: block;
  width: 120px;
  height: 20px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .10);
}
:root .qdm-lib-skeleton-head em {
  display: block;
  width: 78px;
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
}
:root .qdm-lib-skeleton-head .qdm-lib-skeleton-hint {
  margin-left: auto;
  color: #8b93a7;
  font-size: 13px;
  letter-spacing: .02em;
}

:root .qdm-lib-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
:root .qdm-lib-skeleton-card {
  overflow: hidden;
  border: 1px solid var(--qdm-line, rgba(255, 255, 255, .07));
  border-radius: 14px;
  background: var(--qdm-card, #181a20);
}
:root .qdm-lib-skeleton-cover {
  aspect-ratio: 460 / 215;
  background: rgba(255, 255, 255, .06);
}
:root .qdm-lib-skeleton-line {
  height: 15px;
  margin: 14px 10px 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
}
:root .qdm-lib-skeleton-line.short { width: 46%; margin-bottom: 16px; }

/* 流动高光（.qdm-lib-skeleton 下面所有占位块共用） */
:root .qdm-lib-skeleton i,
:root .qdm-lib-skeleton b,
:root .qdm-lib-skeleton em,
:root .qdm-lib-skeleton-cover,
:root .qdm-lib-skeleton-line {
  position: relative;
  overflow: hidden;
}
:root .qdm-lib-skeleton i::after,
:root .qdm-lib-skeleton b::after,
:root .qdm-lib-skeleton em::after,
:root .qdm-lib-skeleton-cover::after,
:root .qdm-lib-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent);
  transform: translateX(-100%);
  animation: qdm-lib-shimmer 1.5s ease-in-out infinite;
}
@keyframes qdm-lib-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  :root .qdm-lib-skeleton i::after,
  :root .qdm-lib-skeleton b::after,
  :root .qdm-lib-skeleton em::after,
  :root .qdm-lib-skeleton-cover::after,
  :root .qdm-lib-skeleton-line::after { animation: none; }
}

@media (max-width: 1080px) {
  :root .qdm-lib-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}