/* 会员榜单专用样式（原 svip.php 控制器 $boardCss 内联 <style>）
 * 年度榜滚动轮播 + 永久榜暗金炫酷风格（尊重"减少动态效果"设置）
 */

/* 年度榜：无缝循环滚动，悬停/聚焦暂停
 * track 由两个完全等高的 <ul>（各自带 10px 底距）构成，translateY(-50%) 恰好平移一份，循环零跳变。
 * 滚动时长由 svip.php 按条数注入 --vip-scroll-duration。
 */
.vip-scroll-wrap { overflow: hidden; }
.vip-scroll-track { display: flex; flex-direction: column; animation: vip-scroll var(--vip-scroll-duration, 30s) linear infinite; will-change: transform; }
.vip-scroll-wrap:hover .vip-scroll-track,
.vip-scroll-wrap:focus-within .vip-scroll-track { animation-play-state: paused; }
@keyframes vip-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

/* 内容不足一屏（JS 检测后标记）：停止滚动并隐藏复制副本，避免露出重复行 */
.vip-scroll-static .vip-scroll-track { animation: none; }
.vip-scroll-static .vip-scroll-track ul[aria-hidden="true"] { display: none; }

/* 永久榜：墨绿夜色底 + 金色流光边框 + 头部扫光 + 皇冠呼吸。
 * 根治圆角黑/灰线：用真正的渐变边框（background-clip: padding-box + border-box）
 * 取代 pseudo 元素遮罩环，鎏金渐变直接画在 border 区域，卡片暗底被裁剪到 padding-box 内，
 * 圆角处再也不会露出深色抗锯齿边。
 */
.perm-card {
  position: relative;
  border: 4px solid transparent;
  border-radius: 1.5rem;
  overflow: hidden;
  /* 底层：墨绿夜色底（padding-box 内）；外层：鎏金渐变（border-box 内）。
   * 两层 background-position 分别控制：暗底固定，鎏金边框流动。 */
  background:
    linear-gradient(160deg, #0d1f13 0%, #152e1c 45%, #0b1a0f 100%) padding-box,
    linear-gradient(120deg, #c9a252, #f2dd96 25%, #fdf3c0 50%, #f2dd96 75%, #c9a252) border-box;
  background-origin: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  background-position: 0% 0%, 0% 50%;
  animation: perm-border-flow 5.5s linear infinite;
  box-shadow: 0 0 24px rgba(242, 221, 150, .22);
}
@keyframes perm-border-flow { 0% { background-position: 0% 0%, 0% 50%; } 100% { background-position: 0% 0%, 100% 50%; } }

.perm-head { position: relative; overflow: hidden; background: linear-gradient(90deg, #0f2a19, #1c452a 30%, #265436 50%, #1c452a 70%, #0f2a19); }
.perm-head::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg); animation: perm-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes perm-shine { 0% { left: -60%; } 55%, 100% { left: 130%; } }

.perm-crown { filter: drop-shadow(0 0 8px rgba(242, 221, 150, .75)); animation: perm-glow 2.4s ease-in-out infinite; }
@keyframes perm-glow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(242, 221, 150, .45)); } 50% { filter: drop-shadow(0 0 13px rgba(242, 221, 150, .95)); } }

.perm-row { background: linear-gradient(120deg, rgba(242, 221, 150, .08), rgba(242, 221, 150, .02)); border: 1px solid rgba(242, 221, 150, .22); }
.perm-row:hover { border-color: rgba(242, 221, 150, .5); box-shadow: 0 0 16px rgba(242, 221, 150, .14); }
.perm-name { background: linear-gradient(90deg, #f2dd96, #fdf3c0, #c9a252); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 移动端：边框略收窄，鎏金流光效果不变；仅保留金辉光 */
@media (max-width: 640px) {
  .perm-card { border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  /* 鎏金流光边框（perm-card::before）与年度榜滚动（vip-scroll-track）
   * 按需求持续运行，不随「减少动态效果」停用；仅降级纯装饰动画 */
  .perm-head::after, .perm-crown { animation: none; }
}