/* ============================================================
   影之刃零 · 国风暗金皮肤（只改外观，不改任何 HTML 结构）
   ------------------------------------------------------------
   启用：在 index.php 的 </head> 前加一行
        <link rel="stylesheet" href="assets/skin-sha.css?v=1">
   停用：删掉那一行即可完整回滚

   覆盖对象：背景 / 顶栏 / Hero / 统计卡 / 热门轮播 / 游戏卡片 / 新闻条 / 页脚
   色板：墨黑 + 暗棕 + 鎏金 + 一点血红
   ============================================================ */

:root{
  --sha-gold:     #d9b45a;
  --sha-gold-lt:  #f2d99a;
  --sha-gold-dim: rgba(217, 180, 90, .32);
  --sha-gold-faint: rgba(217, 180, 90, .14);
  --sha-ink:      #08070a;
  --sha-panel:    #14100c;
  --sha-panel-2:  #1c1510;
  --sha-text:     #cbbba6;
  --sha-dim:      #8a7a68;
  --sha-blood:    #a8322c;
  --sha-serif:    "STKaiti", "KaiTi", "楷体", "STZhongsong", "Songti SC", "SimSun", serif;
}

/* ---------- 1. 全屏水墨底图 ---------- */
/* 用固定层而不是 background-attachment:fixed —— 后者滚动时每帧重绘 */
body{
  background: var(--sha-ink) !important;
  color: var(--sha-text) !important;
  overflow-x: hidden;            /* 右下角立绘会伸出框外 */
}
html::before{
  content: "";
  position: fixed; inset: 0;
  z-index: -2;
  background: var(--sha-ink) url(theme/sha-page.jpg) center 40% / cover no-repeat;
  filter: brightness(.62) saturate(.9);   /* 整屏背景：要看得见，不能压成黑 */
}
html::after{
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  /* 只做四周压暗 + 极淡的上下渐隐，中间完全通透 */
  background:
    radial-gradient(105% 72% at 50% 0%, rgba(8, 7, 10, .48), rgba(8, 7, 10, .10) 48%, transparent 74%),
    linear-gradient(180deg,
      rgba(8, 7, 10, .40) 0%,
      rgba(8, 7, 10, .08) 26%,
      rgba(8, 7, 10, .26) 64%,
      rgba(8, 7, 10, .58) 100%);
}

/* ---------- 2. 顶栏 ---------- */
.index-header,
.header-bg{
  background: rgba(9, 7, 11, .93) !important;
  border-bottom: 1px solid var(--sha-gold-dim) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .8) !important;
}
.zhuige-nav-list li a{
  color: var(--sha-dim) !important;
  letter-spacing: 2px;
}
.zhuige-nav-list li a:hover,
.zhuige-nav-list li.nav-activ a{
  color: var(--sha-gold-lt) !important;
  text-shadow: 0 0 14px rgba(217, 180, 90, .45);
}
.zhuige-search-form .input-keyword{
  background: rgba(0, 0, 0, .55) !important;
  border: 1px solid var(--sha-gold-dim) !important;
  color: var(--sha-text) !important;
}
.zhuige-search-form .input-keyword:focus{
  border-color: var(--sha-gold) !important;
  box-shadow: 0 0 14px rgba(217, 180, 90, .25) !important;
}
.zhuige-btn-search{
  background: linear-gradient(180deg, #6b5426, #3d2f14) !important;
  border: 1px solid var(--sha-gold-dim) !important;
}

/* ---------- 3. Hero ---------- */
.zg-home-hero{
  border-bottom: 1px solid var(--sha-gold-faint);
}
/* 换掉原来那张街机背景，并隐藏它的 <img>（只动样式，不删节点） */
.zhuige-search-bg{
  height: 560px !important;                 /* 原 480 → banner 更舒展 */
  background: #08070a url(theme/sha-bg.jpg) center 22% / cover no-repeat !important;
}
.zhuige-search-bg img{ display: none !important; }

/* ---------- 画卷式金框：内嵌双线 + 四角 L 型金饰 + 顶部菱形 ---------- */
.zhuige-search-bg{ position: relative !important; }
.zhuige-search-bg::after{
  content: "";
  position: absolute;
  top: 14px; left: 5%; right: 5%;   /* 对齐 .container（width:90%） */
  height: 420px;                     /* 只框住标题+搜索区，不压到下方轮播 */
  z-index: 2;
  pointer-events: none;
  border: 26px solid transparent;
  /* 云纹角饰：96x96 的 SVG 按 32 切片，四角复用、边线拉伸 */
  border-image: url(theme/frame-corner.svg) 32 / 26px stretch;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .55);
}
/* 顶部中央菱形金饰 */
.zhuige-search-bg::before{
  content: "";
  position: absolute;
  top: 9px; left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  z-index: 3;
  background: var(--sha-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(217, 180, 90, .85);
}
@media (max-width: 900px){
  .zhuige-search-bg::after{ height: auto; bottom: 14px; left: 3%; right: 3%; }
}
/* 暗罩：只压顶部和底部，中间留亮，保证主视觉看得见 */
.zg-home-hero::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 50% 44%, rgba(8, 7, 10, .58), transparent 76%),
    linear-gradient(180deg,
      rgba(8, 7, 10, .72) 0%,
      rgba(8, 7, 10, .12) 34%,
      rgba(8, 7, 10, .24) 62%,
      rgba(8, 7, 10, .62) 100%);
}
.zhuige-search-box{ z-index: 3 !important; }
/* 热门游戏轮播：原本绝对定位贴底，会把 banner 图压掉一大块。
   改成文档流，接到图片下方，只向上压 46px 保留"浮在图上"的感觉 */
.zg-hero-carousel{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: -46px;
  padding-bottom: 8px;
  z-index: 3 !important;
}

/* 原主题的 Synthwave 网格地面和扫描光带与国风冲突，隐藏掉 */
.lyw-grid-floor,
.lyw-scan-beam{ display: none !important; }

/* 标题：宋体 + 大字距 + 金色辉光 */
.zhuige-main-search h1{
  position: relative;
  padding-bottom: 54px !important;          /* 给下面的匾额横梁（44px）留位置 */
  font-family: var(--sha-serif) !important;
  color: #f6e4b6 !important;
  letter-spacing: 10px !important;
  text-indent: 10px;
  text-shadow: 0 0 30px rgba(217, 180, 90, .5), 0 2px 0 #000 !important;
}
/* 匾额横梁：厚木条 + 上下金轨 + 一排铆钉 + 两端金珠 + 中央暗金晕 */
.zhuige-main-search h1::after{
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: min(800px, 94%);
  height: 44px;
  transform: translateX(-50%);
  border-radius: 4px;
  border: 2px solid #b8912f;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .85),
    inset 0 3px 0 rgba(255, 232, 170, .5),
    inset 0 -14px 20px rgba(0, 0, 0, .85);
  background:
    /* 中央暗金晕 */
    radial-gradient(circle at 50% 50%, rgba(217, 180, 90, .30) 0 90px, transparent 92px),
    /* 两端金珠 */
    radial-gradient(circle at 50% 50%, #ffe9b8 0 4px, #b8912f 4px 6.5px, transparent 7px) 16px 50% / 26px 26px no-repeat,
    radial-gradient(circle at 50% 50%, #ffe9b8 0 4px, #b8912f 4px 6.5px, transparent 7px) right 16px center / 26px 26px no-repeat,
    /* 一排铆钉 */
    radial-gradient(circle at 50% 50%, rgba(255, 232, 176, .92) 0 4px, rgba(255, 232, 176, 0) 4.5px) 44px 50% / 36px 100% repeat-x,
    /* 木条本体 */
    linear-gradient(180deg, #5b3f1e 0%, #33220f 46%, #170f07 100%);
}
.zhuige-main-search h1::before{
  content: "";
  position: absolute;
  left: 50%; bottom: 14px;
  width: 132px; height: 18px;
  transform: translateX(-50%);
  z-index: 2;
  border: 1px solid #e8c97d;
  border-radius: 2px;
  background: linear-gradient(180deg, #6b4a22, #241809);
  box-shadow: 0 0 16px rgba(217, 180, 90, .45), inset 0 0 10px rgba(0, 0, 0, .8);
}
.zhuige-search-key a{
  color: var(--sha-dim) !important;
  border: 1px solid var(--sha-gold-faint) !important;
  background: rgba(0, 0, 0, .35) !important;
  letter-spacing: 1px;
}
.zhuige-search-key a:hover{
  color: var(--sha-gold-lt) !important;
  border-color: var(--sha-gold) !important;
  background: rgba(217, 180, 90, .1) !important;
}

/* Hero 上的 HUD 装饰：青色改成金色 */
.lyw-hud{
  --hudc: var(--sha-gold) !important;
  --hudc-soft: rgba(217, 180, 90, .42) !important;
  --hudc-line: rgba(217, 180, 90, .9) !important;
}

/* ---------- 4. 新闻长条 ---------- */
.zg-news-bar{
  background: linear-gradient(90deg, #120d09 0%, #1e1510 55%, #120d09 100%) !important;
  border-bottom: 1px solid var(--sha-gold-faint) !important;
}
.zg-news-label{ color: var(--sha-gold) !important; }
.zg-news-btn{
  color: var(--sha-text) !important;
  background: rgba(0, 0, 0, .4) !important;
}

/* ---------- 5. 热门轮播 ---------- */
.zg-hero-head h2{
  font-family: var(--sha-serif) !important;
  color: var(--sha-gold-lt) !important;
  letter-spacing: 6px !important;
  text-shadow: 0 0 22px rgba(217, 180, 90, .4) !important;
}
.zg-hero-card{
  border: 1px solid rgba(217, 180, 90, .18) !important;
}
.zg-hero-card:hover{
  border-color: var(--sha-gold) !important;
  box-shadow: 0 0 26px rgba(217, 180, 90, .3), inset 0 0 30px rgba(217, 180, 90, .08) !important;
}
.zg-hero-badge{
  background: linear-gradient(180deg, #f0d089, #c9a44c) !important;
  color: #1a1208 !important;
}

/* ---------- 6. 统计卡 ---------- */
.stats-row{
  background: linear-gradient(135deg, rgba(28, 21, 16, .96), rgba(16, 12, 9, .98)) !important;
  border: 1px solid var(--sha-gold-dim) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, .7), inset 0 0 40px rgba(0, 0, 0, .5) !important;
}
.stat-card{ border-right: 1px solid var(--sha-gold-faint); }
.stat-icon{ color: var(--sha-gold) !important; }
.stat-number{
  font-family: var(--sha-serif) !important;
  color: var(--sha-gold-lt) !important;
  text-shadow: 0 0 18px rgba(217, 180, 90, .45);
}
.stat-label{ color: var(--sha-dim) !important; letter-spacing: 2px; }
.stat-announce-item{ color: var(--sha-text) !important; }

/* ---------- 7. 游戏卡片 ---------- */
.zhuige-list-container .zhuige-base-list{
  background: linear-gradient(180deg, #17110c 0%, #100c08 100%) !important;
  border: 1px solid rgba(217, 180, 90, .18) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55) !important;
}
.zhuige-list-container .zhuige-base-list:hover{
  border-color: var(--sha-gold-dim) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .7), 0 0 20px rgba(217, 180, 90, .12) !important;
}
/* 卡片上那道流光边框改成静态金线 */
.zhuige-list-container .zhuige-base-list::before{
  background: linear-gradient(180deg, rgba(217, 180, 90, .55), rgba(217, 180, 90, .06) 45%, rgba(217, 180, 90, .3)) !important;
  animation: none !important;
}
.zhuige-list-text h5.text-title a{
  color: #e6d3ab !important;
  font-family: var(--sha-serif);
  letter-spacing: .5px;
}
.zhuige-list-text h5.text-title a:hover{ color: var(--sha-gold-lt) !important; }
.zhuige-list-text .zg-card-date{ color: var(--sha-dim) !important; }
.zg-card-tags span{
  color: var(--sha-gold) !important;
  background: rgba(217, 180, 90, .1) !important;
  border-color: rgba(217, 180, 90, .34) !important;
}
/* 角标：金底黑袍 */
.zhuige-list-mark span{
  background: linear-gradient(180deg, #d9b45a, #a8823c) !important;
  color: #1a1208 !important;
  box-shadow: 0 0 14px rgba(217, 180, 90, .4);
}
.zhuige-list-mark span.zg-mark-upd{ background: linear-gradient(180deg, #c0453c, #8a2a24) !important; color: #ffe9c8 !important; }
.zhuige-list-mark span.zg-mark-hot{ background: linear-gradient(180deg, #e08a3c, #a85c1c) !important; color: #1a1208 !important; }
/* 封面上的浏览数 / 尺寸胶囊 */
.zg-view-pill{
  background: rgba(8, 7, 10, .78) !important;
  border: 1px solid var(--sha-gold-faint);
  color: var(--sha-gold-lt) !important;
}
.zg-size-pill{
  background: rgba(8, 7, 10, .82) !important;
  border-color: var(--sha-gold-faint) !important;
  color: var(--sha-gold) !important;
}
/* 悬停展开的简介浮层 */
.moplay-desc-panel{
  background: #1c1510 !important;
  border-color: var(--sha-gold-dim) !important;
}
.moplay-desc-text{ color: var(--sha-dim) !important; }

/* ---------- 8. 类型图标：金色描边 ---------- */
.zhuige-list-container .zg-genre-icons .gi{
  background: linear-gradient(180deg, #241a12, #100b07) !important;
  border-color: rgba(217, 180, 90, .22) !important;
  color: var(--sha-gold) !important;
}

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

/* ---------- 10. 滚动条 ---------- */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: #0b090e; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #6b5426, #3d2f14);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover{ background: #8a6a2a; }

/* ============================================================
   卷轴主框：把「统计 + 游戏列表」整块包进金框里
   markup（index.php）：
     <div class="sha-frame">
       <div class="sha-frame-top"></div>      顶部木梁
       <div class="sha-frame-body"> …原内容… </div>
       <div class="sha-frame-corner"></div>   右下角立绘
     </div>
   ============================================================ */
.sha-frame{
  position: relative;
  max-width: 1280px;
  margin: 34px auto 44px;
  z-index: 3;
}

/* 顶部木梁：匾额下方那道横向装饰 */
.sha-frame-top{
  position: relative;
  height: 46px;
  margin: 0 26px -20px;
  background: linear-gradient(180deg, #3b2a16 0%, #241a10 55%, #150f09 100%);
  border: 1px solid rgba(217, 180, 90, .5);
  border-bottom: none;
  box-shadow: 0 -6px 26px rgba(0, 0, 0, .8);
}
.sha-frame-top::before,
.sha-frame-top::after{
  content: "";
  position: absolute; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px;
  background: var(--sha-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(217, 180, 90, .85);
}
.sha-frame-top::before{ left: 18px; }
.sha-frame-top::after{ right: 18px; }

/* 主面板：金框 + 暗棕底 */
.sha-frame-body{
  position: relative;
  z-index: 2;
  border: 26px solid transparent;
  border-image: url(theme/frame-corner.svg) 32 / 26px stretch;
  background: linear-gradient(180deg, rgba(26, 19, 14, .95) 0%, rgba(14, 10, 8, .97) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .7),
    0 24px 80px rgba(0, 0, 0, .85),
    inset 0 0 140px rgba(0, 0, 0, .7);
}
/* 框内顶部/底部各一条渐隐金线，把内容收住 */
.sha-frame-body::before,
.sha-frame-body::after{
  content: "";
  position: absolute; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sha-gold-dim) 15%, var(--sha-gold-dim) 85%, transparent);
  pointer-events: none;
}
.sha-frame-body::before{ top: 6px; }
.sha-frame-body::after{ bottom: 6px; }

/* 框内内容去掉自身外边距，别在金框里漏缝 */
.sha-frame-body .zhuige-stats-cards{ margin-top: 0 !important; }
.sha-frame-body .main-body{ margin-bottom: 0 !important; }
.sha-frame-body .container{ width: 100% !important; max-width: none; }

/* 右下角人物立绘（透明 PNG，站在卷轴框右外侧，被框遮住一半） */
.sha-frame-corner{
  position: absolute;
  right: -92px;
  bottom: -34px;
  width: min(310px, 23vw);
  aspect-ratio: 1024 / 1750;
  z-index: 1;                       /* 面板是 z-index:2，人物从框后探出 */
  pointer-events: none;
  background: url(theme/sha-hero.png) right bottom / contain no-repeat;
  filter: drop-shadow(-14px 10px 40px rgba(0, 0, 0, .85));
}

@media (max-width: 1400px){
  .sha-frame{ margin-left: 16px; margin-right: 16px; }
  .sha-frame-corner{ right: -22px; width: 200px; }
}
@media (max-width: 900px){
  .sha-frame-corner{ display: none; }
  .sha-frame-body{ border-width: 16px; border-image-width: 16px; }
  .sha-frame-top{ margin: 0 16px -20px; height: 34px; }
}