:root {
  --text: #333333;
  --muted: #666666;
  --blue-600: #2563eb;
  --blue-800: #1e40af;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #f7f7f7;
  color: var(--text);
  font-family: Arial, sans-serif;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px 0 50px;
}
/* Hero */
.hero {
  position: relative;
}
.logo {
  position: absolute;
  top: 20px;
  left: 25px;
  z-index: 10;
  width: 120px;
  height: auto;
  transform: scale(0.7);
  transform-origin: top left;
}
.hero-img {
  width: 100vw;
  height: auto;
}
.hero-pc {
  display: none;
}
.hero-mobile {
  display: block;
}
.download-cta {
  position: absolute;
  left: 50%;
  bottom: 5vw;
  transform: translateX(-50%);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.download-cta:hover {
  transform: translateX(-50%) translateY(-8px) scale(1.05);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
}

.download-cta:active {
  transform: translateX(-50%) translateY(-4px) scale(1.02);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  transition: all 0.1s ease;
}

.download-cta:focus {
  outline: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)) brightness(1.1);
}

.download-cta:focus-visible {
  outline: 2px solid #0079ff;
  outline-offset: 4px;
}
.download-cta img {
  width: 30vw;
  max-width: 240px;
  height: auto;
  margin-bottom: 10px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.download-cta:hover img {
  filter: brightness(1.1) contrast(1.05);
}

.download-cta:active img {
  filter: brightness(0.95);
  transition: all 0.1s ease;
}
/* Sections */
.section {
  padding: 50px 15px;
}
.section-title {
  text-align: center;
  font-size: 32px;
  margin: 0 0 16px;
  padding-bottom: 20px;
}

/* News */

.news-card {
  width: 100%;
  background: var(--card);
  border-radius: 15px;
  box-shadow: 0 6px 10px #dce6f1;
  overflow: hidden;
  width: 100%;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.news-card:active {
  transform: translateY(0);
  transition: transform 0.1s ease;
}

.news-status {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.status-badge.status-new {
  background: linear-gradient(135deg, #ff6b3d, #ff8e53);
  box-shadow: 0 2px 8px rgba(255, 107, 61, 0.3);
}

.status-badge.status-update {
  background: linear-gradient(135deg, #04e161, #00d4a7);
  box-shadow: 0 2px 8px rgba(4, 225, 97, 0.3);
}

.status-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 状态徽章动画 */
@keyframes statusPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 107, 61, 0.3);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 107, 61, 0.5);
  }
}

@keyframes statusGlow {
  0%, 100% { 
    box-shadow: 0 2px 8px rgba(4, 225, 97, 0.3);
  }
  50% { 
    box-shadow: 0 4px 16px rgba(4, 225, 97, 0.6);
  }
}

/* 状态徽章进入动画 */
.status-badge {
  animation: badgeEnter 0.6s ease-out;
}

@keyframes badgeEnter {
  0% { 
    opacity: 0;
    transform: translateY(-10px) scale(0.8);
  }
  100% { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.news-thumb {
  width: 100%;
  border-bottom: 1px solid #eef2f7;
  position: relative;
  border-radius: 10px 10px 0 0;
}

.news-thumb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 30%);
  pointer-events: none;
}

.news-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 16px 18px;
  gap: 16px;
}

.news-content {
  flex: 1;
  min-width: 0;
}

.news-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.news-subtitle {
  font-size: 13px;
  color: #a6a6a6;
  line-height: 1.4;
  margin: 4px 0 0 0;
}

.news-time {
  text-align: right;
  min-width: 80px;
}

.news-date {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

.news-time-ago {
  color: #d3d3d3;
  font-size: 11px;
  margin: 4px 0 0 0;
  line-height: 1.2;
  position: relative;
  transition: color 0.3s ease;
}

.news-time-ago.updating {
  color: var(--blue-600);
}

.news-time-ago.updating::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--blue-600);
  border-radius: 50%;
  animation: timeUpdateDot 1s ease-in-out infinite;
}

@keyframes timeUpdateDot {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}






.char-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 15px 0 15px;
  gap: 20px;
}

.char-name {
  font-size: clamp(20px, 4vw, 32px);
  margin: 0;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  z-index: 11;
}

.badge { 
  display: inline-flex; 
  align-items: center; 
  margin-left: 0; 
}

.badge img { 
  height: 1em; 
  width: auto; 
  display: block; 
}

.char-region {
  font-size: 22px;
  color: #61fdff;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.char-region img {
  height: 26px;
  width: auto;
}
.char-figure {
  width: 80vw;
  max-width: 320px;
  margin: 16px auto 8px;
  text-align: center;
  animation: float 4s ease-in-out infinite;
  z-index: 3;
}
.char-figure img {
  width: 100%;
  height: auto;
}


.char-stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  background: linear-gradient(135deg, #019ee3, #31befb);
  border-radius: 5px 15px 5px 15px;
  padding: 16px;
  margin: 0;
  
}
.stat {
  margin-bottom: 8px;
}
.stat:last-child {
  margin-bottom: 0;
}
/* 更贴近参考图的统计条布局 */
.stat { display: grid; grid-template-columns: var(--progress-indent) 1fr; align-items: center;}
.stat-icon { width: var(--progress-indent); display: flex; justify-content: flex-start; align-items: center; z-index: 10; }
.stat-icon img { height: 42px; width: auto; max-width: 100%; border-radius: 0; }
.stat-main { width: 100%; text-align: center;padding: 0 20px 0 20px; }
.stat-line { display: flex; align-items: baseline; }
.stat-name { font-size: 18px; z-index: 10; color:#fff;}
.stat-value { 
  margin-left: auto; 
  font-size: 18px; 
  font-style: italic;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  z-index: 10;
  color:#fff;
}

.stat-value.animate {
  animation: valuePulse 0.6s ease-out;
}

@keyframes valuePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); color: #ff6b3d; }
  100% { transform: scale(1); }
}
.progress {
  height: 12px;
  background: linear-gradient(180deg, #006fc5, #005aa3);
  border-radius: 3px 0px 3px 0px;
  overflow: hidden;
  width: 100%;
  margin-left: 0;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.bar { 
  height: 100%; 
  border-radius: 3px 0px 3px 0px;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
  z-index: 10;
}



.bar-green { 
  background: linear-gradient(90deg, #04e161, #00d4a7);
  box-shadow: 0 0 10px rgba(4, 225, 97, 0.4);
}

.bar-red { 
  background: linear-gradient(90deg, #ff512f, #ff6b3d);
  box-shadow: 0 0 10px rgba(255, 81, 47, 0.4);
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 属性条加载动画 */
.progress.loading .bar {
  animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* 属性条加载状态指示器 */
.progress.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: loadingShimmer 1.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes loadingShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 属性条完成动画 */
.progress.complete .bar {
  animation: completeGlow 0.8s ease-out;
}

@keyframes completeGlow {
  0% { box-shadow: 0 0 10px rgba(4, 225, 97, 0.4); }
  50% { box-shadow: 0 0 20px rgba(4, 225, 97, 0.8), 0 0 30px rgba(4, 225, 97, 0.6); }
  100% { box-shadow: 0 0 10px rgba(4, 225, 97, 0.4); }
}

/* 属性条数值变化动画 */
.progress.updated .bar {
  animation: updatePulse 0.6s ease-out;
}

@keyframes updatePulse {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(1.02); }
  100% { transform: scaleX(1); }
}

/* 角色图片浮动动画 */
@keyframes float {
  0%, 100% { 
    transform: translateY(0px);
  }
  50% { 
    transform: translateY(-8px);
  }
}

/* 属性条悬停效果 */
.progress:hover .bar {
  filter: brightness(1.1);
  transition: filter 0.3s ease;
}

/* 属性条焦点效果 */
.progress:focus-within .bar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  transition: box-shadow 0.3s ease;
}

.stats-right { 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: 130px;
  padding: 0 10px 0 20px;
}
.skill-group { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.skill-title { 
  font-size: 20px; 
  margin-bottom: 8px; 
  color:#fff;
  z-index: 10;
}
.skill-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.skill-icon img { 
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.avatar-carousel {
  width: 100%;
  position: relative;
}

.avatar-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.avatar-viewport::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.avatar-track {
  display: flex;
  gap: 4px;
  will-change: transform;
  transition: transform 0.36s cubic-bezier(0.2, 0.7, 0.2, 1);
  padding: 6px;
}

.avatar-card {
  flex: 0 0 calc((100% - 16px) / 5);
  aspect-ratio: 1/1;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: url('assets/head_bg_normal.webp') center/contain no-repeat;
  background-size: 100% 100%;
  transform: scale(1);
  transition: transform 0.36s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor: pointer;
  position: relative;
 
}

.avatar-card.is-center {
  background-image: url('assets/head_bg_select.webp');
  transform: scale(1.2);
  z-index: 10;
}

.avatar-card.is-near {
  background-image: url('assets/head_bg_normal.webp');
  transform: scale(1);
  z-index: 10;
}

.avatar-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
  z-index: 10;
}

.avatar-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.character {
  background-image: url('assets/bg_middle.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  padding: 50px 0 10px 0;
}
.avatar-btn {
  pointer-events: auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.avatar-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.05);
}

.avatar-btn:active {
  transform: scale(0.97);
}

.avatar-btn svg {
  width: 22px;
  height: 22px;
}

/* Screenshot */
.featured-banner {
  width: 100%;
  padding: 50px 30px 60px 30px;
  box-sizing: border-box;
}

.featured-banner .title {
  text-align: center;
  font-size: 32px;
  margin: 0 0 16px;
  padding-bottom: 20px;
}
#shots-swiper {
  width: 100%;
  border-radius: 32px;
box-shadow: 0 6px 10px #dce6f1;
}
.swiper-pagination{
  display:flex !important;
  position: relative !important;
  margin-top: 30px !important;
  justify-content: center;
  width: 100%;
  z-index: 10;
  gap: 1px;
}

.swiper-pagination-bullet{
  width: 20px; 
  height: 20px; 
  border-radius: 50%;
  background: #cccccc;
  transition: all 0.3s ease;
  cursor: pointer;
}

.swiper-pagination-bullet:hover {
  background: #a0a0a0 !important;
  transform: scale(1.1);
}

.swiper-pagination-bullet-active{
  background: #ff9000 !important;
  transform: scale(1.3);
  box-shadow: 0 2px 8px rgba(255, 144, 0, 0.4);
}

/* Follow */
.follow {
  background: url('assets/bg_followus.webp') center/cover no-repeat;
  color: #ffffff;
  padding: 24px 0 28px;
  text-align: center;
}
.follow-title { 
  margin: 0 0 20px; 
  text-align: center;
  font-size: 22px;
  padding-top: 20px;
}
.socials { display: flex; gap: 18px; justify-content: center; }
.socials img { width: 28px; height: 28px; }
.legal { 
  margin: 16px 0 6px; 
  color: #d6e6ff; 
  padding-top: 20px;
}
.legal a { color: #b6fff9; text-decoration: none; font-size: 12px; }
.legal .sep { opacity: .2; margin: 0 5px; }
.copyright { color: #0bc3e8; font-size: 10px; line-height: 1.4; }

 
@media (min-width: 960px) {
  /* PC端轮播图分页器隐藏 */
  .swiper-pagination {
    display: none !important;
  }

  /* PC端英雄区域显示 */
  .hero-pc {
    display: block;
  }
  .hero-mobile {
    display: none;
  }
  
  /* PC端下载按钮优化 */
  .download-cta img {
    width: 340px;
    max-width: none;
  }

  /* PC端角色名称优化 */
  .char-name {
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.1;
    flex-wrap: wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  

  /* PC端角色模块优化 */
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px 0 50px;
  }
  .character {
    background-image: url('assets/bg_middle.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 50px 0 10px 0;
  }
  .char-head {
    padding: 0 25px 0 25px;
    z-index: 7;
    margin-bottom: 30px;
  }
  
  .char-figure {
    width: 60vw;
    max-width: 400px;
    margin: 30px auto 25px;
    animation: float 4s ease-in-out infinite;
    z-index: 9;
  }

  .char-stats {
    padding: 16px;
    gap: 24px;
    border-radius: 8px 20px 8px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 8;
    max-width: 800px;
    margin: 0 auto;
  }
  
  /* PC端属性条优化 */
  :root { --progress-indent: 80px; }
  
  .stat-main { 
    padding: 0 30px 0 30px;
  }
  
  .progress { 
    height: 20px; 
    border-radius: 10px;
  }
  
  .skill-title { 
    font-size: 18px; 
    margin-bottom: 8px; 
  }
  
  .stat-name { 
    font-size: 18px; 
  }
  
  .stat-value { 
    font-size: 18px; 
  }
  
  .stat-line { 
    margin-bottom: 8px;
  }
  
  .stat-icon img { 
    height: 48px; 
    width: auto; 
  }
  
  /* PC端技能图标优化 */
  .skill-icon { 
    width: 72px; 
    height: 72px; 
    border-width: 3px; 
  }
  
  /* PC端头像轮播优化 */
  .avatar-carousel {
    max-width: 900px;
    margin: 0 auto;
  }
  
  .avatar-viewport {
    width: 100%;
  }
 
  .avatar-card {
    flex: 0 0 calc((100% - 4*16px) / 5);
    gap: 16px;
    transform: scale(0.75);
  }
  
  .avatar-card.is-center {
    transform: scale(0.9);
  }
  
  .avatar-card.is-near {
    transform: scale(0.8);
  }
  
  /* PC端新闻模块优化 */
  .news-card {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  
  .news-thumb {
    border-radius: 12px 12px 0 0;
  }
          #shots-swiper {
      width: 100%;
      border-radius: 20px;

      overflow: hidden;
      margin: 0 auto;
      max-width: 1200px;
    }
  
  .slide-frame {
    position: relative;
    width: 100%;
    height: 400px;
    aspect-ratio: 16/9;
    border-radius: 20px;
    overflow: hidden;
  }
  
  .slide-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }
  
  .swiper-slide:hover .slide-frame img {
    transform: scale(1.05);
  }
  
  .swiper-slide {
    transition: transform 0.3s ease;
  }
  
  .swiper-slide:hover {
    transform: translateY(-5px);
  }
  
  .slide-frame {
    transition: box-shadow 0.3s ease;
  }
  

  .news-status {
    top: 16px;
    left: 16px;
    gap: 12px;
  }
  
  .status-badge {
    padding: 6px 12px;
    font-size: 11px;
  }
  
  .news-meta {
    padding: 20px 20px 24px;
    gap: 20px;
    align-items: baseline;
  }
  
  .news-title {
    font-size: 18px;
  }
  
  .news-subtitle {
    font-size: 14px;
    color: #a6a6a6;
  }
  
  .news-time {
    min-width: 90px;
  }
  
  .news-date {
    font-size: 14px;
  }
  
  .news-time-ago {
    font-size: 12px;
    color: #d3d3d3;
  }
  
  /* PC端导航器样式 */
  .swiper-button-next,
  .swiper-button-prev {
    display: flex !important;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    color: #333;
    font-weight: bold;
  }
  
  .swiper-button-next:hover,
  .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transform: scale(1.1);
  }
  
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 20px;
    font-weight: bold;
  }
  
  .swiper-button-next {
    right: 20px;
  }
  
  .swiper-button-prev {
    left: 20px;
  }
}

@media (max-width: 480px) {
  /* 移动端专用比例优化 */
  .section-title {
    font-size: 22px;
  }
  .char-name {
    font-size: clamp(18px, 4vw, 27px);
    flex-wrap: wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .char-region {
    font-size: 15px;
    color: #61fdff;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .char-region img {
    height: 16px;
    width: auto;
  }
  .featured-banner .title {
    font-size: 22px;
  }
  .character .container { width: 100%; padding: 0 15px 0 15px; }
  .character {
    background-image: url('assets/bg_middle.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 50px 0 10px 0;
  }
  .char-head {
    padding: 0 0 0 0; /* 保持顶部40px，左右改为0 */
    z-index: 7;
  }
  
  .char-figure {
    width: 65vw;
    max-width: none;
    margin: 20px auto 20px;
    animation: float 4s ease-in-out infinite;
    z-index: 9;
  }

  .char-stats {
    padding: 10px;
    gap: 0px;
    border-radius: 3px 10px 3px 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.12);
    z-index: 8;
  }
  :root { --progress-indent: 56px; }
  
  .stat-main { padding: 0 0 0 0;}
  .progress { height: 15px; }
  .skill-title { font-size: 15px; margin-bottom: 0px; }
  .stat-name { font-size: 15px; }
  .stat-value { font-size: 15px; }
  .stat-line { margin-bottom: 2px;}
  .stat-icon img { height: 36px; width: auto; }
  
  /* 移动端属性条动画优化 */
  .bar { transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .stat-value { transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .skill-icon { width: 56px; height: 56px; border-width: 2px; }
  .avatar-list { gap: 0px; padding-top: 5px; }
  .avatar-list li { width: 20vw; height: 20vw; max-width: 96px; max-height: 96px; }
  .copyright { font-size: 8px; padding: 0 10px;}

  

  #shots-swiper {
    box-shadow: 0 6px 10px #dce6f1;
    border-radius: 10px;
  }

  .news-card {
    width: 100%;
    margin-left: 0;
    border-radius: 10px;
    box-shadow: 0 6px 10px #dce6f1;
  }
  
  .news-thumb {
    border-radius: 10px 10px 0 0;
  }
  
  /* 移动端new模块优化 */
  .news-status {
    top: 8px;
    left: 8px;
    gap: 6px;
  }
  
  .status-badge {
    padding: 3px 6px;
    font-size: 9px;
  }
  
  .news-meta {
    padding: 12px 12px 14px;
    gap: 12px;
    align-items: baseline;
  }
  
  .news-title {
    font-size: 15px;
  }
  
  .news-subtitle {
    font-size: 12px;
    color: #a6a6a6;
  }
  
  .news-time {
    min-width: 70px;
  }
  
  .news-date {
    font-size: 12px;
  }
  
  .news-time-ago {
    font-size: 10px;
    color: #d3d3d3;
  }




  /* 移动端隐藏头像导航器 */
  .avatar-controls {
    display: none !important;
  }


  
    /* slide 容器：固定比例 17:9 */
    .slide-frame{
      position: relative;
      width: 100%;
      aspect-ratio: 17/9;     /* 始终保持 17:9 */
      border-radius: 10px;
      overflow: hidden;
    }
    .slide-frame img{
      width:100%; height:100%; object-fit: cover; display:block;
    }
}






/* ===== Avatar List v7: 11 items, 5 per view, looping, click + swipe ===== */
.avatar-strip, .fishList{
  position: relative;
  display:flex; gap:12px; padding:0 12px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  scroll-snap-align: center;
  scroll-padding-left: 50%;
  scroll-padding-right: 50%;
}
.avatar-strip::-webkit-scrollbar, .fishList::-webkit-scrollbar{ display:none; }

.avatar, .chip{
  flex: 0 0 calc((100% - 2*12px - 4*12px)/5); /* 5 per view */
  aspect-ratio: 1/1;
  border-radius: 16px;
  border:1px solid #ffffff20;
  background: center/cover no-repeat url('assets/img/head_bg_normal.webp'), #0f2d55;
  display:grid; place-items:center;
  transform: scale(.9);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .18s ease, opacity .18s ease;
  opacity:.95;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x;
  will-change: transform, box-shadow, border-color, background, opacity;
  scroll-snap-align: center;
}
.avatar img, .chip img{
  width: 82%; height: 82%; object-fit: cover; border-radius: 12px;
}
.avatar.is-selected, .chip.is-selected{
  transform: scale(1);
  background: center/cover no-repeat url('assets/img/head_bg_select.webp'), #0f2d55;
  box-shadow: 0 10px 24px rgba(24,195,255,.35), 0 0 0 2px rgba(24,195,255,.45) inset;
  border-color: rgba(24,195,255,.6);
  opacity:1;
}
.avatar-strip.is-scrolling .avatar.is-selected,
.fishList.is-scrolling .chip.is-selected{
  transform: scale(.9);
  background: center/cover no-repeat url('assets/img/head_bg_normal.webp'), #0f2d55;
  box-shadow:none; border-color:#ffffff20;
}

/* 触摸状态优化 */
.avatar:active, .chip:active {
  transform: scale(.85);
  transition: transform .1s ease;
}

.avatar:focus, .chip:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 195, 255, 0.6);
}

.avatar:focus-visible, .chip:focus-visible {
  outline: 2px solid rgba(24, 195, 255, 0.8);
  outline-offset: 2px;
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .avatar-strip, .fishList {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scroll-padding-left: 20%;
    scroll-padding-right: 20%;
  }
  
  .avatar:hover, .chip:hover {
    transform: scale(.95);
  }
  
  .avatar:active, .chip:active {
    transform: scale(.8);
    transition: transform .05s ease;
  }
  
  /* 触摸灵敏度优化 */
  .avatar, .chip {
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 触摸边界限制 */
  .avatar-strip:active, .fishList:active {
    overscroll-behavior-x: none;
  }
}

/* 触摸灵敏度精细控制 */
@media (pointer: fine) {
  .avatar-strip, .fishList {
    scroll-snap-type: x proximity;
  }
}
@media (prefers-reduced-motion: reduce){
  .avatar, .chip{ transition:none; }
}

/* 移动端隐藏导航器 */
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}