/* ============================================================
   04-common.css  公共组件：区块标题、胶囊按钮、页面切换动画
   这里的样式5个tab共用
   ============================================================ */

/* 区块大标题（如"推荐平台 / 品质保障"） */
.section-title {
  text-align:center; margin: 28px 0 8px;
  font-size: 24px; font-weight: 800; letter-spacing:1px;
}
.title-line {
  width: 110px; height: 3px; margin: 10px auto 22px;
  background: linear-gradient(90deg, #22d3b8, #a06cf0);
  border-radius: 2px;
}

/* 顶部胶囊分类按钮（开奖页4个、试玩页3个） */
.chips { display:flex; gap:10px; overflow-x:auto; padding: 4px 2px 10px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip {
  flex-shrink:0; padding: 10px 16px; border-radius: 12px;
  background: rgba(18,46,56,.7);
  border: 1px solid rgba(60,190,170,.35);
  color:#cfe8e2; font-size: 14px;
  display:flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
}
.chip.active {
  background: linear-gradient(90deg, rgba(43,191,168,.4), rgba(91,91,208,.5));
  color:#fff; border-color: rgba(120,220,200,.6);
}

/* 页面切换淡入动画 */
.page { display:none; }
.page.active { display:block; animation: fade .25s ease; }
@keyframes fade { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none;} }