/* ============================================================
   影之刃零 · 列表页皮肤（list.php / tag.php / links.php 共用）
   ------------------------------------------------------------
   依赖 skin-sha.css：色板变量（--sha-gold / --sha-ink / ...）
   与全屏水墨背景都由它提供，本文件只覆盖 render_header
   输出的组件：顶栏 / 页标题 / 列表行卡片 / 徽章 / 分页 / 页脚

   特效原则（与全站一致）：
   - 动画只动 transform / opacity，hover 用一次性 transition
   - 全部包在 prefers-reduced-motion: no-preference 里
   - 窄屏自动收敛
   ============================================================ */

/* ========== 1. 顶栏（layout.php 的 .header-3344） ========== */
.header.header-3344{
  background: rgba(9, 7, 11, .93);
  border-bottom: 1px solid var(--sha-gold-dim);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .8);
}
.header-3344 .logo-icon{
  background: linear-gradient(180deg, #6b5426, #3d2f14);
  color: #f6e4b6;
  border: 1px solid var(--sha-gold-dim);
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(217, 180, 90, .3);
}
.header-3344 .logo-name{
  font-family: var(--sha-serif);
  color: var(--sha-gold-lt);
  letter-spacing: 4px;
  text-shadow: 0 0 16px rgba(217, 180, 90, .35);
}
.header-3344 .logo-sub{ color: var(--sha-dim); letter-spacing: 2px; }
.header-3344 .searchbox input{
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--sha-gold-dim);
  color: var(--sha-text);
}
.header-3344 .searchbox input::placeholder{ color: #5f5244; }
.header-3344 .searchbox input:focus{
  border-color: var(--sha-gold);
  box-shadow: 0 0 14px rgba(217, 180, 90, .25);
}
.header-3344 .searchbox button{
  background: linear-gradient(180deg, #6b5426, #3d2f14);
  border: 1px solid var(--sha-gold-dim);
  color: #f6e4b6;
  font-weight: 700;
  transition: filter .18s ease;
}
.header-3344 .searchbox button:hover{ filter: brightness(1.18); }

/* ========== 2. 页标题：小匾额（宋体金字 + 朱红印章 + 金线收尾） ========== */
.section-title{
  font-family: var(--sha-serif);
  color: var(--sha-gold-lt);
  letter-spacing: 6px;
  text-shadow: 0 0 22px rgba(217, 180, 90, .4);
}
/* 印章：标题左侧一枚朱红方印 */
.section-title::before{
  content: "藏";
  width: 24px; height: 24px;
  margin-right: 10px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #b23a33, #7e241f);
  color: #f6e4b6;
  font-size: 14px; font-weight: 400;
  letter-spacing: 0;
  border: 1px solid rgba(246, 228, 182, .55);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(168, 50, 44, .5), inset 0 0 5px rgba(0, 0, 0, .45);
}
/* 金线：标题右侧渐隐延伸 */
.section-title::after{
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 16px;
  align-self: center;
  background: linear-gradient(90deg, var(--sha-gold-dim), transparent);
}
.section-title .sub{ color: var(--sha-dim); letter-spacing: 1px; }

/* ========== 3. 列表行卡片：暗棕 + 鎏金描边 + 左缘金条 ========== */
.game-list{ gap: 10px; }
.game-row{
  position: relative;
  background: linear-gradient(180deg, #17110c, #100c08);
  border: 1px solid rgba(217, 180, 90, .18);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.game-row:hover{
  transform: translateY(-2px);
  border-color: var(--sha-gold-dim);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .7), 0 0 22px rgba(217, 180, 90, .14);
}
/* 左缘金条：hover 时自上而下点亮（金→血渐变） */
.game-row::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sha-gold), var(--sha-blood));
  opacity: 0;
  transform: scaleY(.2);
  transform-origin: top;
  transition: opacity .25s ease, transform .3s ease;
  pointer-events: none;
  z-index: 2;
}
.game-row:hover::before{ opacity: 1; transform: scaleY(1); }

/* ========== 4. 封面：横版条幅（封面源图 460x215，完整展示不裁切）+ hover 放大 + 金色刀光 ========== */
.game-row .cover{
  position: relative;
  width: 168px;
  aspect-ratio: 460/215;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #241b12, #14100c);
  border: 1px solid rgba(217, 180, 90, .22);
  border-radius: 8px;
  transition: transform .25s ease;
  z-index: 1;
}
/* 无封面图时（占位）：金色标题文字 */
.game-row .cover .cv-title{
  color: #e6d3ab;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.game-row:hover .cover{ transform: scale(1.03); }
/* 刀光：一道金色斜光在封面上从左扫到右（只 hover 播放一次） */
.game-row .cover::after{
  content: "";
  position: absolute;
  top: -30%; bottom: -30%;
  left: 0;
  width: 46%;
  background: linear-gradient(90deg, transparent, rgba(242, 217, 154, .5), transparent);
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference){
  .game-row:hover .cover::after{ animation: lyw-sha-blade .6s ease-out; }
}
@keyframes lyw-sha-blade{
  0%   { transform: translateX(-180%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}

/* ========== 5. 文字 / 元信息：金棕体系 ========== */
.game-row .g-name{
  font-family: var(--sha-serif);
  font-size: 16px;
  color: #e6d3ab;
  letter-spacing: 1px;
  transition: color .18s ease, text-shadow .18s ease;
}
.game-row .g-name:hover{
  color: var(--sha-gold-lt);
  text-shadow: 0 0 14px rgba(217, 180, 90, .45);
}
.game-row .g-desc{ color: var(--sha-dim); }
.game-row .g-meta{ color: var(--sha-dim); }
.game-row .g-meta .sz{ color: var(--sha-gold); }
.game-row .g-meta .yr{ color: var(--sha-dim); }
.game-row .g-meta .dl{ color: var(--sha-dim); }
.game-row .g-meta .dl b{ color: var(--sha-gold-lt); }

/* ========== 6. 徽章：金底黑袍 / 血底金字 ========== */
.badge-upd,
.badge-upd-red{
  background: linear-gradient(180deg, #c0453c, #8a2a24);
  color: #ffe9c8;
  border: 1px solid rgba(255, 233, 200, .35);
  box-shadow: 0 0 10px rgba(192, 69, 60, .35);
}
.badge-new{
  background: linear-gradient(180deg, #d9b45a, #a8823c);
  color: #1a1208;
  box-shadow: 0 0 12px rgba(217, 180, 90, .4);
}

/* ========== 7. 分页：暗金描边 + 当前页朱红 ========== */
.pager a{
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--sha-gold-faint);
  color: var(--sha-dim);
  border-radius: 6px;
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.pager a:hover{
  border-color: var(--sha-gold);
  color: var(--sha-gold-lt);
  box-shadow: 0 0 12px rgba(217, 180, 90, .25);
}
.pager a.cur{
  background: linear-gradient(180deg, #8a2a24, #5e1a16);
  border-color: var(--sha-blood);
  color: #f6e4b6;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(168, 50, 44, .45);
}
.pager .dots{ color: var(--sha-dim); }

/* ========== 8. 页脚 ========== */
.footer{
  background: #08070a;
  border-top: 1px solid var(--sha-gold-faint);
}
.footer .copyright,
.footer .copyright a{ color: #6a5b4c; }

/* ========== 9. 行入场：错峰淡入上浮（--i 由 PHP 输出） ========== */
@media (prefers-reduced-motion: no-preference){
  .game-row{
    animation: lyw-sha-row-in .5s cubic-bezier(.2, .7, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  @keyframes lyw-sha-row-in{
    from{ opacity: 0; transform: translateY(14px); }
    to  { opacity: 1; transform: none; }
  }
}

/* ========== 窄屏收敛 ========== */
@media (max-width: 768px){
  .section-title{ letter-spacing: 3px; }
  .game-row:hover{ transform: none; }
}