/* 首页预测列表样式 - 精简版 */

/* 彩种标签 */
.lottery-tabs {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* ===== lottery-tabs-wrapper UI 美化增强（追加覆盖） ===== */
.lottery-tabs-wrapper{
  /* 保留你原有功能 */
  display:flex;
  flex-wrap: nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  /* 视觉升级 */
  position: relative;
  gap: 0px;
  padding: 5px 11px;
  margin: 7px 2px 1px;
  border-radius: 16px;

  /* 玻璃底 + 轻渐变 */
  background: linear-gradient(135deg,
    rgba(102,126,234,.10),
    rgba(118,75,162,.08)
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* 细边框 + 柔阴影 */
  box-shadow:
    0 10px 26px rgba(0,0,0,.08),
    0 0 0 1px rgba(102,126,234,.12) inset;
}

/* 隐藏滚动条（你原来的保留即可） */
.lottery-tabs-wrapper::-webkit-scrollbar{ display:none; }

/* 背景闪点（纯CSS，轻量） */
.lottery-tabs-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  pointer-events:none;
  opacity:.8;
  background:
    radial-gradient(7px 7px at 12% 35%, rgba(102,126,234,.18), transparent 60%),
    radial-gradient(6px 6px at 34% 70%, rgba(118,75,162,.14), transparent 60%),
    radial-gradient(5px 5px at 62% 40%, rgba(102,126,234,.12), transparent 60%),
    radial-gradient(6px 6px at 88% 65%, rgba(118,75,162,.16), transparent 60%);
  animation: tabsSpark 6s linear infinite;
}
@keyframes tabsSpark{
  0%{ transform: translateX(-10px); opacity:.55; }
  50%{ transform: translateX(10px); opacity:.9; }
  100%{ transform: translateX(-10px); opacity:.55; }
}

/* 渐变“描边”边框（更高级） */
.lottery-tabs-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  pointer-events:none;
  padding: 1px;
  background: linear-gradient(90deg,
    rgba(102,126,234,.35),
    rgba(118,75,162,.25),
    rgba(102,126,234,.35)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.75;
}

/* 两侧“淡出遮罩”，提示可左右滑（不挡点击） */
.lottery-tabs-fade{
  display:none; /* 默认不用 */
}
.lottery-tabs-wrapper .fade-left,
.lottery-tabs-wrapper .fade-right{ display:none; }

/* 不加HTML也能实现：用 box-shadow 模拟淡出（更稳） */
.lottery-tabs-wrapper{
  /* 左右淡出遮罩的感觉 */
  box-shadow:
    0 10px 26px rgba(0,0,0,.08),
    0 0 0 1px rgba(102,126,234,.12) inset,
    inset 18px 0 18px rgba(255,255,255,.85),
    inset -18px 0 18px rgba(255,255,255,.85);
}

/* 低动效模式降级 */
@media (prefers-reduced-motion: reduce){
  .lottery-tabs-wrapper::before{ animation:none !important; }
}


.lottery-tab {
  display: inline-block;
  padding: 10px 10px;
  margin: 0 5px;
  background: #f5f5f5;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  flex-shrink: 0;
}

.lottery-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-weight: bold;
}

/* 预测列表容器 - 限制高度 */
.prediction-container {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  max-height: 400px;
  /* 限制最大高度，约3个用户的高度 */
}

/* ========== 容器：图片背景 + 虚化背景 ========== */
#content_children{
  position: relative;
  overflow-y: auto;
  max-height: 380px;

  /* 背景图（你换成自己的地址） */
  background-image: url("/static/img/fHy95IJ42.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 让内容在虚化层之上 */
  z-index: 0;
}

/* 虚化层：同一张图叠加 + blur */
#content_children::before{
  content: "";
  position: absolute;
  inset: 0;

  /* 关键：再铺一次同样的背景图，专门用来 blur */
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;

  filter: blur(16px);
  transform: scale(1.08); /* 防止 blur 边缘露白 */
  opacity: .95;

  z-index: -2;
}

/* 半透明遮罩：让文字更清晰 */
#content_children::after{
  content: "";
  position: absolute;
  inset: 0;
  filter: blur(16px) brightness(1.35) saturate(1.18);
  background: rgba(255,255,255,.72); /* 亮色遮罩；想更暗就调小或改成 rgba(0,0,0,.35) */
  z-index: -1;
}

/* ========== 卡片：在背景上更“玻璃感”一点（可选） ========== */
.prediction-card{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
  min-width: 0;

  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  margin: 8px 8px; /* 手机上更紧凑可改小 */
}

/* hover */
.prediction-card:hover{
  background: rgba(255,255,255,.88);
}

.prediction-card:last-child{
  border-bottom: none;
}

/* 手机端更紧凑一点（可选） */
@media (max-width: 480px){
  #content_children{ max-height: 380px; }
  .prediction-card{
    margin: 6px 6px;
    padding: 10px 8px;
    border-radius: 10px;
  }
  #content_children::before{ filter: blur(14px); }
}


/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.user-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.user-avatar-placeholder {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

/* 并排显示的各个元素 */
.user-nickname {
  min-width: 50px;
  max-width: 70px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.lottery-name {
  min-width: 45px;
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  flex-shrink: 0;
}

.play-name {
  min-width: 40px;
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.lottery-expect {
  min-width: 55px;
  font-size: 13px;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.user-stats-inline {
  display: flex;
  margin-left: auto;
  flex-shrink: 0;
}
.user-details {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-stats {
  font-size: 12px;
  color: #999;
  display: flex;
  gap: 10px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 预测信息 */
.prediction-info {
  text-align: right;
  flex-shrink: 0;
  margin-left: 10px;
}

.prediction-period {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.prediction-badge {
  display: inline-block;
  padding: 3px 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 12px;
  font-size: 12px;
}

.prediction-badge.free {
  background: #52c41a;
}

/* 加载状态 */
.bload {
  text-align: center;
  padding: 15px;
  color: #999;
  font-size: 14px;
}

.bload.none {
  display: none;
}

/* 查看更多按钮 */
/* 查看更多按钮 - 带箭头 + 微动 + 涟漪 */
.view-more{
  position: relative;
  text-align: center;
  padding: 12px 42px 12px 14px; /* 右侧预留箭头位置 */
  margin: 10px 10px 14px;
  border-radius: 14px;

  color: #1e5bff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;

  background: linear-gradient(135deg,
    rgba(102,126,234,.20) 0%,
    rgba(66,153,225,.16) 45%,
    rgba(34,211,238,.14) 100%
  );

  border: 1px solid rgba(102,126,234,.22);
  box-shadow:
    0 10px 24px rgba(10, 50, 150, .10),
    inset 0 1px 0 rgba(255,255,255,.65);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  overflow: hidden;
}

/* 右侧箭头（纯 CSS） */
.view-more span{ /* 如果你内部没有span，这条不会影响；可忽略 */
  display:inline-block;
}

.view-more::after{
  content:"";
  position:absolute;
  top:50%;
  right:14px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(30,91,255,.75);
  border-bottom: 2px solid rgba(30,91,255,.75);
  transform: translateY(-50%) rotate(-45deg);
  opacity: .9;
  transition: transform .18s ease, opacity .18s ease;
}

/* 流光层 */
.view-more::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-35%) rotate(12deg);
  opacity: .45;
  animation: viewMoreShine 2.6s linear infinite;
  pointer-events: none;
}

/* Hover：更亮更立体 + 箭头微动 */
.view-more:hover{
  border-color: rgba(102,126,234,.35);
  box-shadow:
    0 14px 30px rgba(10, 50, 150, .14),
    0 0 0 4px rgba(102,126,234,.10),
    inset 0 1px 0 rgba(255,255,255,.75);
  transform: translateY(-1px);
}
.view-more:hover::after{
  transform: translateY(-50%) rotate(-45deg) translateX(2px);
  opacity: 1;
}

/* Active：按压 */
.view-more:active{
  transform: translateY(1px) scale(.99);
  box-shadow:
    0 8px 18px rgba(10, 50, 150, .12),
    inset 0 2px 10px rgba(0,0,0,.06);
}

/* 点击涟漪（纯 CSS 简版）：用渐变模拟 */
.view-more:active::before{
  opacity: .65;
  filter: blur(1px);
}

/* 轻微“提示”呼吸（可选） */
.view-more{
  animation: viewMoreBreath 3.2s ease-in-out infinite;
}
@keyframes viewMoreBreath{
  0%,100%{ box-shadow: 0 10px 24px rgba(10, 50, 150, .10), inset 0 1px 0 rgba(255,255,255,.65); }
  50%{ box-shadow: 0 14px 28px rgba(10, 50, 150, .14), inset 0 1px 0 rgba(255,255,255,.72); }
}

@keyframes viewMoreShine{
  0%   { transform: translateX(-45%) rotate(12deg); }
  100% { transform: translateX(45%)  rotate(12deg); }
}

/* 无障碍：键盘聚焦 */
.view-more:focus-visible{
  outline: none;
  box-shadow:
    0 14px 30px rgba(10, 50, 150, .14),
    0 0 0 4px rgba(34,211,238,.18),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce){
  .view-more{ animation: none; }
  .view-more::before{ animation: none; }
}

/* 手机端更紧凑 */
@media (max-width: 480px){
  .view-more{
    margin: 8px 8px 12px;
    padding: 11px 40px 11px 12px;
    border-radius: 12px;
    font-size: 13.5px;
  }
}


/* 响应式 */
@media (max-width: 375px) {
  .prediction-card {
    gap: 4px;
    padding: 10px 8px;
  }
  
  .user-avatar,
  .user-avatar-placeholder {
    width: 32px;
    height: 32px;
  }
  
  .user-avatar-placeholder {
    font-size: 14px;
  }
  
  .user-nickname {
    min-width: 45px;
    max-width: 60px;
    font-size: 13px;
  }
  
  .lottery-name {
    min-width: 40px;
    font-size: 12px;
  }
  
  .play-name {
    min-width: 35px;
    font-size: 11px;
  }
  
  .lottery-expect {
    min-width: 50px;
    font-size: 12px;
  }
  
  .stat-item {
    font-size: 11px;
  }
}

/* 超小屏幕优化 */
@media (max-width: 320px) {
  .prediction-card {
    gap: 3px;
    padding: 8px 6px;
  }
  
  .user-avatar,
  .user-avatar-placeholder {
    width: 30px;
    height: 30px;
  }
  
  .user-avatar-placeholder {
    font-size: 12px;
  }
  
  .user-nickname {
    min-width: 40px;
    max-width: 50px;
    font-size: 12px;
  }
  
  .lottery-name {
    min-width: 35px;
    font-size: 11px;
  }
  
  .play-name {
    min-width: 30px;
    font-size: 10px;
  }
  
  .lottery-expect {
    min-width: 45px;
    font-size: 11px;
  }
  
  .stat-item {
    font-size: 10px;
  }
  
  /* 极小屏幕时隐藏玩法名称 */
  .play-name {
    display: none;
  }
}