/* 1. 基础重置与全局样式（统一默认值，避免浏览器差异） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html, body {
  overflow: hidden; /* 禁止页面滚动核心 */
  height: 100vh; /* 统一高度单位，覆盖冗余的100% */
  touch-action: none; /* 禁止触摸行为 */
  background-color: #000; /* 覆盖重复的body背景，保留深色主背景 */
}

/* 2. 顶部导航（页面固定头部） */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100; /* 保证导航在最上层 */
}

.back-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  cursor: pointer;
  color: #fff;
}

.nav-title {
  flex: 1;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}

.more-icon {
  width: 47px;
  height: 24px;
  color: #fff;
}

.top-nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 20px;
  font-size: 16px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.top-nav a.active {
  border-bottom: 2px solid #fff;
  font-weight: bold;
  padding-bottom: 3px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* 3. 内容容器（核心滑动区域） */
.container {
  height: 100vh;
  transition: transform 0.5s ease; /* 滑动过渡动画 */
}

.slide {
  height: 100vh;
  position: relative;
  background-size: cover;
  background-position: center;
  display: none; /* 默认隐藏未激活slide */
}

.slide.active {
  display: block; /* 激活时显示 */
}

/* 4. 用户信息（固定在底部左侧） */
.user-info {
  position: fixed;
  bottom: 80px;
  left: 80px;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.nickname {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 5px;
}

.detail {
  font-size: 16px;
  display: flex;
  gap: 15px;
}

/* 5. 功能按钮组（左侧两个按钮区域，统一尺寸与样式） */
/* 左侧垂直按钮组（func-btns） */
.func-btns {
  position: fixed;
  left: 15px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

/* 左侧水平按钮组（func-btns-left） */
.func-btns-left {
  position: fixed;
  left: 80px;
  bottom: 20px;
  display: flex;
  gap: 10px; /* 简化无效的row-reverse，按默认顺序排列更直观 */
  z-index: 100;
}

/* 按钮通用样式（统一尺寸、背景、交互） */
.func-btn, .func-btnss {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  color: #000;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 按钮间距微调（按方向区分） */
.func-btn {
  margin-top: 19px; /* 垂直组：上下间距 */
}

.func-btnss {
  margin-right: 19px; /* 水平组：左右间距 */
}

/* 按钮内SVG（统一尺寸，避免变形） */
.func-btn svg, .func-btnss svg {
  width: 25px;
  height: 25px; /* 统一宽高，修复原22px导致的变形 */
  fill: #333;
}

/* 6. 滑动箭头提示（固定在屏幕中间，引导交互） */
.slide-arrow {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* 避免遮挡点击 */
}

.arrow-down {
  bottom: 40px;
  transform: translateX(-50%) translateY(20px);
}

.arrow-up {
  top: 60px;
  transform: translateX(-50%) translateY(-20px);
}

.slide-arrow.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0); /* 显示时回归正常位置 */
}

.slide-arrow.pulse {
  animation: pulse 1.5s infinite; /* 呼吸动画 */
}

/* 7. 特殊状态提示（无数据/加载中） */
.empty-tip, .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  display: none; /* 默认隐藏 */
}

/* 8. 辅助样式（链接、头像容器） */
a {
  text-decoration: none;
  color: #fff;
}

a:hover {
  color: #ff0000; /*  hover状态反馈 */
}

.n {
  color: #ff69b4; /* 特殊文字颜色标记 */
}

.user-avatar {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar canvas {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持头像比例，避免拉伸 */
}

#fxBtn {
  display: none; /* 分享按钮默认隐藏（JS控制显示） */
}

/* 动画定义（放在最后，统一管理） */
@keyframes pulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.1); }
  100% { transform: translateX(-50%) scale(1); }
}