/* ============================================================
   51skins 首页视觉
   - 主视觉用 CS2 官方主视觉做全幅背景（左侧压暗保证文字可读）
   - 只覆盖样式 + 轻量 DOM 注入，不改构建产物里的 Vue 模板
   ============================================================ */

/* ---------- 1. 主视觉：CS2 游戏画面 ---------- */

/* 轮播层里同时装着背景图和文字，不能整层隐藏：
   只隐藏背景图（.bg-cover）和第一张叠着的空图层 */
/* 轮播会切换激活的 slide，不能固定隐藏第一层，只隐藏里面的背景图 */
section.relative.overflow-hidden[data-ui-hero="art"] .bg-cover {
  background-image: none !important;
  display: none !important;
}
/* 层内自带的渐变会压暗我们的底图，淡化掉 */
section.relative.overflow-hidden[data-ui-hero="art"] > div.absolute.inset-0 .bg-gradient-to-r {
  opacity: 0.55 !important;
}
section.relative.overflow-hidden[data-ui-hero="art"] > div.absolute.inset-0 .bg-black\/45 {
  opacity: 0.25 !important;
}

section.relative.overflow-hidden[data-ui-hero="art"] {
  background: #060807 url(/assets/ph/hero-cs2.jpg) right center / cover no-repeat;
}

/* 左侧压暗，保证标题和正文可读；右侧留出画面 */
section.relative.overflow-hidden[data-ui-hero="art"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      #060807 0%,
      #060807 30%,
      rgba(6, 8, 7, 0.96) 44%,
      rgba(6, 8, 7, 0.72) 58%,
      rgba(6, 8, 7, 0.30) 74%,
      rgba(6, 8, 7, 0.08) 100%),
    linear-gradient(180deg, rgba(6, 8, 7, 0.55) 0%, transparent 22%, transparent 78%, rgba(6, 8, 7, 0.72) 100%);
  z-index: 1;
  pointer-events: none;
}

/* 画面缓速推近，制造呼吸感 */
@keyframes ui-hero-zoom {
  from { background-size: 108% auto; }
  to   { background-size: 116% auto; }
}

section.relative.overflow-hidden[data-ui-hero="art"] {
  animation: ui-hero-zoom 26s ease-in-out infinite alternate;
}

/* 文字层压在遮罩之上 */
section.relative.overflow-hidden[data-ui-hero="art"] > div.relative.z-10 {
  position: relative;
  z-index: 5;
}

/* ---------- 2. 标题排版 ---------- */
h1.cs-title {
  background: linear-gradient(96deg, #ffffff 22%, #ffd9b8 58%, #ff8a3d 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.02em;
  text-shadow: none;
}

/* 主视觉按钮微交互 */
section.relative.overflow-hidden a,
section.relative.overflow-hidden button {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
section.relative.overflow-hidden a:hover,
section.relative.overflow-hidden button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(234, 88, 12, 0.28);
}

/* ---------- 3. 数据卡片 ---------- */
section .grid > div {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
section .grid > div:hover {
  transform: translateY(-3px);
  border-color: rgba(234, 88, 12, 0.45) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* ---------- 4. 主视觉高度 ---------- */
@media (min-width: 1025px) {
  section.relative.overflow-hidden {
    height: 620px !important;
  }
}

/* ---------- 5. 最新上架横向滚动条 ---------- */
.ui-feed-wrap {
  padding: 24px 32px 10px;
  max-width: 1600px;
  margin: 0 auto;
}
.ui-feed-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 8px 12px;
}
.ui-feed-head span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #e5e7eb;
  text-transform: uppercase;
}
.ui-feed-head em {
  font-style: normal;
  font-size: 11px;
  color: #6b7280;
}
.ui-feed-track {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ui-feed-inner {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: ui-feed-marquee 60s linear infinite;
}
.ui-feed-track:hover .ui-feed-inner {
  animation-play-state: paused;
}
@keyframes ui-feed-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ui-feed-card {
  width: 186px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.ui-feed-card:hover {
  border-color: rgba(234, 88, 12, 0.5);
  background: rgba(234, 88, 12, 0.06);
  transform: translateY(-2px);
}
.ui-feed-img {
  width: 54px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.ui-feed-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.ui-feed-meta { min-width: 0; flex: 1; }
.ui-feed-name {
  font-size: 11.5px;
  line-height: 1.35;
  color: #d1d5db;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ui-feed-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  white-space: nowrap;
}
.ui-feed-price {
  font-size: 13px;
  font-weight: 800;
  color: #f97316;
  white-space: nowrap;
}
.ui-feed-off {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #ef4444;
  border-radius: 3px;
  padding: 1px 4px;
}

/* ---------- 6. 备案页脚 ---------- */
.ui-icp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px 22px;
  font-size: 12px;
  line-height: 1.6;
  color: #6b7280;
  background: #060807;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ui-icp a {
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ui-icp a:hover {
  color: #f97316;
}
.ui-icp .ui-icp-sep {
  color: rgba(255, 255, 255, 0.16);
}

/* ---------- 7. 窄屏 ---------- */
@media (max-width: 1024px) {
  section.relative.overflow-hidden[data-ui-hero="art"] {
    background-position: 72% center;
    animation: none;
  }
  section.relative.overflow-hidden[data-ui-hero="art"]::before {
    background:
      linear-gradient(90deg, #060807 0%, rgba(6, 8, 7, 0.94) 40%, rgba(6, 8, 7, 0.62) 75%, rgba(6, 8, 7, 0.35) 100%),
      linear-gradient(180deg, rgba(6, 8, 7, 0.4) 0%, transparent 30%, rgba(6, 8, 7, 0.8) 100%);
  }
}

@media (max-width: 768px) {
  .ui-feed-wrap { padding: 18px 16px 8px; }
  .ui-feed-card { width: 168px; }
}