/* ==========================================================================
   1. 全局样式重构与防御机制
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: radial-gradient(circle at 50% 0%, #071f31 0%, #010a10 100%);
  color: #ffffff;
  min-height: 100vh;
  overflow-x: hidden;
}

.site-wrapper {
  display: block;
  width: 100%;
  min-height: 100vh;
}

/* ==========================================================================
   【新增】：移动端/弹窗式 侧边栏菜单样式 (Menu Sidebar)
   ========================================================================== */
.mobile-sidebar {
  position: fixed;
  top: 0;
  left: -280px; /* 默认隐藏在屏幕左侧边缘外 */
  width: 280px;
  height: 100vh;
  background-color: #05111d;
  box-shadow: 5px 0 25px rgba(0, 0, 0, 0.8);
  z-index: 999; /* 保证层级在最上方 */
  display: flex;
  flex-direction: column;
  padding: 25px 20px;
  transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑滑出动画 */
}

/* 当激活开启动画时滑入屏幕 */
.mobile-sidebar.open {
  left: 0;
}

.sidebar-header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}

.close-sidebar-btn {
  background: none;
  border: none;
  color: #8c97a0;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.2s;
}

.close-sidebar-btn:hover {
  color: white;
}

.sidebar-menu-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8c97a0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  transition: all 0.2s;
}

.sidebar-link:hover, .sidebar-link.active {
  color: white;
  background-color: #122130;
  box-shadow: inset 4px 0 0 #e31c25; /* 左侧红色质感竖线 */
}

.sidebar-footer-box {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.badge-18-sidebar {
  display: inline-block;
  background-color: #e31c25;
  color: white;
  font-weight: 900;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
}

/* 全局半透明遮罩层 */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.sidebar-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   2. NAVBAR 顶部全局导航栏
   ========================================================================== */
.navbar-top {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background-color: rgba(1, 10, 16, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand-zone {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 1px;
}

.logo span {
  color: #e31c25;
}

.nav-main-links {
  display: flex;
  gap: 15px;
  align-items: center;
}

.nav-link-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8c97a0;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.nav-link-item:hover, .nav-link-item.active {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(227, 28, 37, 0.15) 0%, transparent 100%);
  box-shadow: inset 0 -3px 0 #e31c25;
}

.nav-right-zone {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-box-top {
  display: flex;
  align-items: center;
  background-color: #0b1620;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 30px;
  padding: 8px 18px;
  width: 240px;
}

.search-box-top input {
  background: transparent;
  border: none;
  color: white;
  font-size: 13px;
  margin-left: 10px;
  outline: none;
  width: 100%;
}

.nav-auth {
  display: flex;
  gap: 12px;
}

.btn-login {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  padding: 8px 22px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-login:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
}

.btn-register {
  background: linear-gradient(135deg, #e31c25 0%, #b8141b 100%);
  border: none;
  color: #ffffff;
  padding: 8px 22px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(227, 28, 37, 0.3);
}

/* 默认在桌面大屏幕下让 menu按钮 常驻显示 */
.menu-toggle-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: block; /* 保证默认一直能看到和点击 */
}

/* ==========================================================================
   3. 主内容排版布局
   ========================================================================== */
.main-content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.content-container {
  padding: 30px 40px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   4. Banner 轮播区与分类标签栏
   ========================================================================== */
.hero-grid { margin-bottom: 35px; }
.card-large { height: 380px; border-radius: 20px; overflow: hidden; position: relative; border: 1px solid rgba(255, 255, 255, 0.04); }
.slider-container { width: 100%; height: 100%; position: relative; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.8s ease; }
.slide.active { opacity: 1; visibility: visible; }
.slide-bg { width: 100%; height: 100%; background-size: cover; background-position: center; }
.slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.dot { width: 6px; height: 6px; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; transition: all 0.3s; }
.dot.active { background-color: #e31c25; width: 18px; border-radius: 4px; }

.tags-filter-container { margin-bottom: 35px; }
.category-tags { display: flex; gap: 10px; overflow-x: auto; }
.category-tags::-webkit-scrollbar { display: none; }
.tag { background-color: #0b1620; color: #8c97a0; border: 1px solid rgba(255, 255, 255, 0.02); padding: 12px 22px; border-radius: 12px; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.tag:hover, .tag.active { background-color: #122130; color: #ffffff; border-color: rgba(227, 28, 37, 0.2); }

/* ==========================================================================
   5. 复合型并排：Provedores (左) & Winners (右)
   ========================================================================== */
.split-layout-row { display: flex; gap: 30px; margin-bottom: 40px; align-items: stretch; }
.split-col-left { flex: 1; min-width: 0; }
.providers-grid-matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.provider-item { height: 65px; background-color: #0b1620; border-radius: 14px; background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px solid rgba(255, 255, 255, 0.03); transition: transform 0.2s, background-color 0.2s; }
.provider-item:hover { transform: translateY(-3px); background-color: #122130; border-color: rgba(255, 255, 255, 0.08); }

.split-col-right { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; }
.winners-header { margin-bottom: 20px; }
.winners-header h2, .vip-club-section h2, .service-channels-section h2, .faq-accordion-section h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.winners-vertical-list { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.winner-item { background: linear-gradient(135deg, #0b1620 0%, #040d14 100%); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 15px; }
.winner-poster { width: 45px; height: 55px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.winner-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.winner-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-name { font-size: 11px; color: #2b91d5; }
.prize-amount { font-size: 13px; font-weight: 800; }
.btn-jogar { background-color: #4cd137; color: black; border: none; border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; }
.btn-jogar:hover { opacity: 0.9; }

/* ==========================================================================
   6. 通用区块头与滑块组件
   ========================================================================== */
.section-wrapper { margin-bottom: 40px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-header h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.see-all { color: #8c97a0; text-decoration: none; font-size: 13px; font-weight: 600; transition: color 0.2s; }
.see-all:hover { color: white; }
.drag-scroll { display: flex; overflow-x: auto; overflow-y: hidden; padding-bottom: 5px; cursor: grab; }
.drag-scroll::-webkit-scrollbar { display: none; }
.drag-scroll:active { cursor: grabbing; }

/* ==========================================================================
   7. TOP 10 排行榜样式
   ========================================================================== */
.top-games-list { gap: 30px; padding-left: 20px; }
.top-game-item { position: relative; flex: 0 0 170px; height: 210px; display: flex; align-items: flex-end; }
.rank-number { position: absolute; left: -20px; bottom: -15px; font-size: 130px; font-weight: 900; font-style: italic; color: #1c0305; line-height: 1; z-index: 1; -webkit-text-stroke: 2px rgba(227, 28, 37, 0.3); }
.game-poster { position: relative; width: 140px; height: 190px; border-radius: 14px; background-size: cover; background-position: center; z-index: 2; margin-left: auto; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.6); border: 1px solid rgba(255, 255, 255, 0.04); }

/* ==========================================================================
   8. 模块化密集网格矩阵
   ========================================================================== */
.game-matrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.matrix-item { aspect-ratio: 1 / 1.25; background-size: cover; background-position: center; border-radius: 14px; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.04); box-shadow: 0 6px 15px rgba(0,0,0,0.4); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.matrix-item:hover, .game-poster:hover { transform: translateY(-6px); border-color: rgba(227, 28, 37, 0.4); box-shadow: 0 10px 20px rgba(227, 28, 37, 0.15); }
.game-hover-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(1, 10, 16, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; }
.matrix-item:hover .game-hover-mask, .game-poster:hover .game-hover-mask { opacity: 1; }
.btn-play-now { background: linear-gradient(135deg, #e31c25 0%, #b8141b 100%); color: white; border: none; padding: 8px 20px; border-radius: 20px; font-weight: 700; font-size: 12px; cursor: pointer; transform: translateY(10px); transition: transform 0.25s ease; }
.matrix-item:hover .btn-play-now, .game-poster:hover .btn-play-now { transform: translateY(0); }

/* ==========================================================================
   VIP 俱乐部矩阵表格
   ========================================================================== */
.vip-intro-text { color: #8c97a0; font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.vip-table-wrapper { width: 100%; overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.04); background: #0b1620; }
.vip-matrix-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.vip-matrix-table th { background-color: #122130; color: #8c97a0; padding: 16px; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
.vip-matrix-table td { padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.02); font-weight: 600; }
.vip-matrix-table tr:last-child td { border-bottom: none; }
.tier-badge { font-weight: 700; color: #ffffff; }
.highlight-red { color: #e31c25; font-weight: 700; font-size: 14px; }
.vip-matrix-table tr:hover td { background-color: rgba(227, 28, 37, 0.03); transition: background 0.2s; }

/* ==========================================================================
   24/7 服务矩阵卡片 
   ========================================================================== */
.service-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-card { background: #0b1620; border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 16px; padding: 25px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.service-icon { font-size: 32px; margin-bottom: 4px; }
.service-card h3 { font-size: 15px; font-weight: 700; color: #ffffff; }
.service-card p { font-size: 12px; color: #8c97a0; line-height: 1.6; flex: 1; }
.btn-service-action { width: 100%; border: none; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; transition: opacity 0.2s; }
.btn-service-action:hover { opacity: 0.9; }

.gray-btn { background-color: #203144; color: white; }
.green-btn { background-color: #25d366; color: black; }
.blue-btn { background-color: #0088cc; color: white; }
.red-btn { background: linear-gradient(135deg, #e31c25 0%, #b8141b 100%); color: white; }
.service-card.highlighted-glow { border-color: rgba(227, 28, 37, 0.2); box-shadow: 0 10px 25px rgba(227, 28, 37, 0.08); }

/* ==========================================================================
   FAQ 折叠栏
   ========================================================================== */
.faq-container { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #0b1620; border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 12px; overflow: hidden; transition: all 0.3s; }
.faq-question { padding: 18px 24px; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; user-select: none; }
.faq-question::-webkit-details-marker { display: none; }
.arrow-icon { font-size: 10px; color: #8c97a0; transition: transform 0.3s; }
.faq-answer { padding: 0 24px 24px 24px; font-size: 13px; color: #8c97a0; line-height: 1.7; border-top: 1px solid rgba(255, 255, 255, 0.01); }
.faq-item[open] { border-color: rgba(227, 28, 37, 0.2); background: #0f1c29; }
.faq-item[open] .arrow-icon { transform: rotate(180deg); color: #e31c25; }

.text-content-section .content-box { background-color: #0b1620; padding: 25px; border-radius: 14px; border-left: 4px solid #e31c25; }
.text-content-section h2 { font-size: 1.4rem; margin-bottom: 10px; }
.text-content-section p { font-size: 0.95rem; line-height: 1.5; }

/* ==========================================================================
   9. FOOTER 页面尾部
   ========================================================================== */
.main-footer { background-color: rgba(1, 10, 16, 0.6); padding: 50px 0 30px 0; border-top: 1px solid rgba(255, 255, 255, 0.03); margin-top: 40px; }
.footer-container { max-width: 1300px; margin: 0 auto; padding: 0 40px; }
.footer-split-layout { display: flex; justify-content: space-between; gap: 50px; }
.footer-left-side { flex: 0 0 260px; display: flex; flex-direction: column; gap: 30px; }
/* ==========================================================================
   FOOTER SOCIAL ICONS IMAGE OPTIMIZATION (底部社交图标图片化特调)
   ========================================================================== */

.footer-brand-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.social-icons {
  display: flex;
  gap: 12px; /* 图标之间的黄金对齐间距 */
  align-items: center;
}

/* 社交图标的承载卡槽 */
.social-icon-item {
  width: 40px;  /* 锁死完美的图标点击物理外框大小 */
  height: 40px;
  background-color: #111f2d; /* 采用与赢家榜单一致的暗黑底色 */
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 50%; /* 圆形微缩底座 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 核心核心：控制内部图片的缩放与防溢出机制 */
.social-img {
  width: 50%;         /* 图片占轨大小，保证周围留白对称高档 */
  height: 50%;
  object-fit: contain; /* 锁死纵横比，绝不拉伸变形 */
  filter: brightness(0.85); /* 默认融入暗黑环境 */
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* ==========================================================================
   Gempak99 灵魂：悬停时的 Bravo 红色霓虹边缘晕染发光动效
   ========================================================================== */
.social-icon-item:hover {
  transform: translateY(-3px); /* 悬停时轻微向上漂移 */
  background-color: #162638;
  border-color: rgba(227, 28, 37, 0.4); /* 触发品牌红边框 */
  box-shadow: 0 4px 12px rgba(227, 28, 37, 0.3); /* 红色霓虹外发光 */
}

.social-icon-item:hover .social-img {
  filter: brightness(1); /* 图片点亮 */
  transform: scale(1.08); /* 图片内敛放大 */
}
.footer-links-col { display: flex; flex-direction: column; gap: 8px; }
.footer-links-col h3 { color: white; font-size: 14px; margin-bottom: 4px; text-transform: uppercase; }
.footer-links-col a { color: #8c97a0; text-decoration: none; font-size: 12px; }
.support-col .support-phone { color: white; font-weight: 700; font-size: 13px; }

.footer-right-side { flex: 1; display: flex; flex-direction: column; gap: 30px; }
.footer-sponsor-section h3 { font-size: 14px; font-weight: 800; }
.footer-sponsor-section .sponsor-sub { font-size: 11px; color: #8c97a0; margin-bottom: 10px; }
.sponsor-logos { display: flex; gap: 20px; }
.sponsor-logo-item { width: 80px; height: 80px; background-size: contain; background-repeat: no-repeat; }
.footer-alert-link a { color: #e31c25; font-size: 18px; font-weight: 700; text-decoration: none; }
.footer-legal-section { display: flex; flex-direction: column; gap: 15px; background-color: #0b1620; padding: 20px; border-radius: 12px; }
.gov-auth-badge { width: 220px; }
.gov-auth-img { width: 100%; object-fit: contain; }
.legal-text-wrapper p { font-size: 12px; color: #8c97a0; line-height: 1.6; text-align: justify; }

.footer-trust-badges { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.trust-badge-item { width: 120px; height: 60px; background-size: contain; background-repeat: no-repeat; opacity: 0.6; }
.trust-badge-item.colored-shield { width: 45px; height: 45px; opacity: 1; }

.floating-support { position: fixed; bottom: 30px; right: 40px; z-index: 100; }
.support-btn { background-color: #e31c25; color: white; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 20px; cursor: pointer; box-shadow: 0 4px 15px rgba(227, 28, 37, 0.4); }

/* ==========================================================================
   10. 流式全响应式适配 
   ========================================================================== */
@media (max-width: 1200px) {
  .nav-main-links { display: none; }
  .service-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}

@media (max-width: 1024px) {
  .split-layout-row { flex-direction: column; }
  .split-col-right { width: 100%; }
  .providers-grid-matrix { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 850px) {
  .footer-split-layout { flex-direction: column; gap: 40px; }
  .footer-left-side { flex: none; width: 100%; }
  .navbar-top { padding: 0 20px; }
  .content-container { padding: 20px; }
}

@media (max-width: 550px) {
  .search-box-top { display: none; }
  .card-large { height: 220px; }
  .providers-grid-matrix { grid-template-columns: repeat(2, 1fr); }
  .game-matrix-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .service-cards-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   GEMPAK STYLE PROMO MATRIX (红利促销中心专属排版样式)
   ========================================================================== */

.gempak-promo-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

/* 顶部标签细条 */
.gempak-features-bar {
  display: flex;
  justify-content: space-around;
  background: linear-gradient(90deg, #122232 0%, #08131f 100%);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 12px;
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-bar-item {
  font-size: 12px;
  font-weight: 700;
  color: #cdd6de;
  letter-spacing: 0.5px;
}

/* 1. 大型宣传横幅大排版 */
.gempak-hero-banner {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.promo-hero-bg {
  width: 100%;
  aspect-ratio: 2.9 / 1; /* 绝佳的大横幅展现比例 */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 0 50px;
  background-color: #030c14;
}

.promo-hero-content {
  max-width: 600px;
}

.promo-hero-content h1 {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 12px;
  text-shadow: 0 3px 10px rgba(0,0,0,0.8);
}

.promo-hero-content p {
  font-size: 14px;
  color: #a2b0be;
  line-height: 1.6;
}

/* 2. 快捷指标小数据卡片 */
.gempak-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-token {
  background: #0b1622;
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 18px 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.token-value {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
}

.token-title {
  font-size: 11px;
  color: #8c97a0;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* 统一区块标题 */
.gempak-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.gift-icon { font-size: 24px; }
.gempak-section-title h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 3. GEMPAK 核心：多列高密铺卡片网格系统 */
.gempak-cards-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 完美的3列排版 */
  gap: 24px;
}

/* 独立卡片卡槽 */
.gempak-card-item {
  background-color: #0b1622;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gempak-card-item:hover {
  transform: translateY(-6px);
  border-color: rgba(227, 28, 37, 0.3);
  box-shadow: 0 12px 25px rgba(227, 28, 37, 0.12); /* 霓虹暗红晕染外发光 */
}

/* 卡片媒体顶框 */
.gempak-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1.55 / 1; /* 贴近截图的圆润长方宽高比 */
  overflow: hidden;
  background-color: #030a10;
}

.gempak-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform 0.4s ease;
}

.gempak-card-item:hover .gempak-img {
  transform: scale(1.03);
}

/* 右下角 Badge 浮动标签样式 (严格对应图中的红白相间微调) */
.gempak-badge {
  position: absolute;
  bottom: 12px;
  right: 16px;
  background-color: #ffffff;
  color: #000000;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

/* 针对 Cassino 标签的红色文字特调 */
.badge-color-casino {
  color: #e31c25 !important;
}

/* 卡片文案信息座 */
.gempak-card-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.gempak-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.2;
}

.gempak-desc {
  font-size: 13px;
  color: #8c97a0;
  line-height: 1.5;
  margin-bottom: 24px;
  flex: 1; /* 撑开中间，将操作按钮无情推向最底部绝对整齐对齐 */
}

/* 按钮组底座架 */
.gempak-btn-group, .gempak-card-info {
  width: 100%;
}
.gempak-btn-group {
  display: flex;
  gap: 12px;
}

/* 基础通用动作按钮 */
.gempak-card-info button {
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

/* 1. 通栏或者主要的鲜红高发光按钮 */
.btn-red-gradient, .gempak-btn-group button:last-child {
  background: linear-gradient(135deg, #e31c25 0%, #b8141b 100%);
  color: #ffffff;
}
.btn-red-gradient { width: 100%; }

.btn-red-gradient:hover, .gempak-btn-group button:last-child:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 15px rgba(227, 28, 37, 0.4);
}

/* 2. 次要灰色双箭头细节按钮 */
.gempak-btn-sec {
  flex: 0 0 42%;
  background-color: #1b2733;
  color: #8c97a0;
}
.gempak-btn-sec:hover {
  background-color: #243343;
  color: #ffffff;
}

.arrow { font-size: 14px; }

/* ==========================================================================
   4. 完美的响应式适配 (保证跨端时依然是对称饱满的 Gempak 风格)
   ========================================================================== */
@media (max-width: 1100px) {
  .gempak-cards-matrix {
    grid-template-columns: repeat(2, 1fr); /* 自动切换双列对称平铺 */
  }
  .promo-hero-bg {
    padding: 0 30px;
  }
  .gempak-hero-banner {
    aspect-ratio: 2.8 / 1;
  }
}

@media (max-width: 768px) {
  .gempak-stats-row {
    grid-template-columns: repeat(2, 1fr); /* 数据指标格变为 2x2 排版 */
  }
  .promo-hero-content h1 {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .gempak-cards-matrix {
    grid-template-columns: 1fr; /* 手机竖屏切回单幅通栏卡片大图 */
    gap: 16px;
  }
  .gempak-title { font-size: 19px; }
  .gempak-card-info { padding: 18px; }
  .gempak-promo-container { gap: 25px; }
  .gempak-features-bar { justify-content: flex-start; gap: 8px; padding: 10px; }
}

/* ==========================================================================
   BRAVO SPORTS BOOKMAKER COMPOSITE STYLES (独立体育投注页三栏样式)
   ========================================================================== */

/* 全屏三栏复合体外包 */
.sports-layout-wrapper {
  display: flex;
  width: 100%;
  min-height: calc(100vh - 80px); /* 扣除顶部固定 Navbar 后的高度 */
  background-color: #010a10;
}

/* ==========================================================================
   布局 A: 左侧常驻极简功能图标面板
   ========================================================================== */
.sports-left-dock {
  width: 70px;
  background-color: rgba(1, 15, 25, 0.8);
  backdrop-filter: blur(15px);
  border-right: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 15px;
  flex-shrink: 0;
}

.dock-item {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  font-size: 18px;
  color: #8c97a0;
  cursor: pointer;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.dock-item:hover, .dock-item.active {
  color: #ffffff;
  background-color: #0b1622;
  box-shadow: inset 3px 0 0 #e31c25; /* 左侧激活红短条 */
}

.dock-divider {
  width: 30px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.05);
  margin: 5px 0;
}

/* ==========================================================================
   布局 B: 中间赛事大内容流区
   ========================================================================== */
.sports-main-stream {
  flex: 1;
  min-width: 0; /* 锁死容器，防止 flex 布局被内部长表格撑开变形 */
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 巨幕 Libertadores 英雄 Banner */
.sports-hero-banner {
  width: 100%;
  height:100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

.hero-banner-overlay {
  width: 100%;
  padding: 174px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  background-color: #030e17;
}

.hero-banner-content {
  max-width: 500px;
}

.cup-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  background-color: rgba(227, 28, 37, 0.15);
  color: #e31c25;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
  border: 1px solid rgba(227, 28, 37, 0.2);
}

.hero-banner-content h1 {
  font-size: 36px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 8px;
}

.banner-subtext {
  font-size: 14px;
  color: #8c97a0;
  margin-bottom: 24px;
}

.btn-banner-action {
  background: #e31c25;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-banner-action:hover {
  background-color: #b8141b;
  box-shadow: 0 4px 15px rgba(227, 28, 37, 0.4);
}

/* 横向对阵信息小窗口面板 */
.hero-match-vs {
  background-color: rgba(11, 22, 34, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px 30px;
  text-align: center;
}

.vs-time-tag {
  font-size: 12px;
  font-weight: 700;
  color: #8c97a0;
  margin-bottom: 12px;
}

.vs-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.team-name {
  font-size: 15px;
  font-weight: 800;
}

.vs-badge {
  background-color: #e31c25;
  color: white;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 6px;
  border-radius: 4px;
}

/* ==========================================================================
   热门赛事赔率横滑动线滑块组
   ========================================================================== */
.sports-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.sports-section-header h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.swipe-hint {
  font-size: 12px;
  color: #8c97a0;
}

.matches-scroll-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.matches-scroll-grid::-webkit-scrollbar { display: none; }

/* 核心对阵卡片骨架 */
.match-odds-card {
  flex: 0 0 280px; /* 固定每一发卡片的标准宽度，形成横卡流水线 */
  background-color: #0b1622;
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.match-meta-top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #8c97a0;
  margin-bottom: 10px;
}

.match-teams-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
}

.match-teams-title span {
  color: #e31c25;
  font-size: 12px;
  margin: 0 2px;
}

.odds-market-label {
  font-size: 11px;
  color: #8c97a0;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* 赔率 1 X 2 核心按键行 */
.odds-buttons-row {
  display: flex;
  gap: 8px;
}

.odds-btn {
  flex: 1;
  background-color: #122130;
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  color: #8c97a0;
  transition: all 0.2s;
}

.odds-btn .val {
  font-weight: 700;
  color: #ffffff;
}

.odds-btn:hover {
  background-color: #1a2f44;
}

/* 核心激活状态：选中变亮红色发光按键，完美还原体育特色 */
.odds-btn.active {
  background: #e31c25;
  border-color: #e31c25;
  color: rgba(255,255,255,0.8);
}
.odds-btn.active .val {
  color: #ffffff;
}

/* ==========================================================================
   布局 C: 右侧独立注单面板列
   ========================================================================== */
.sports-betslip-sidebar {
  width: 280px;
  background-color: rgba(1, 10, 16, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.betslip-header-box {
  background-color: #0b1622;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.betslip-header-box h3 {
  font-size: 13px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
}

.betslip-minimize-btn {
  background: none;
  border: none;
  color: #8c97a0;
  cursor: pointer;
}

.betslip-body-content {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.empty-slip-state {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.slip-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-slip-state p {
  font-size: 12px;
  color: #8c97a0;
  line-height: 1.5;
}

.btn-insert-code {
  width: 100%;
  background-color: #122130;
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-insert-code:hover {
  background-color: #1a2f44;
}

/* ==========================================================================
   体育大框架自适应流断点机制
   ========================================================================== */
@media (max-width: 1150px) {
  /* 注单面板在平板等中等屏幕下折叠上下挪移，释放中内容区 */
  .sports-betslip-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .sports-left-dock {
    display: none; /* 手机端完全隐藏左底座 */
  }
  .sports-main-stream {
    padding: 16px;
  }
  .hero-banner-overlay {
    padding: 20px;
  }
  .hero-banner-content h1 {
    font-size: 26px;
  }
}

/* ==========================================================================
   GEMPAK STYLE - BRAVO WIKIPEDIA MARKETING STYLES (独立体育页扩展功能样式)
   ========================================================================== */

.sports-wiki-marketing-zone {
  width: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

/* ==========================================================================
   2. 原生折叠内容流样式 (Advanced Accordion Module)
   ========================================================================== */
.sports-accordion-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wiki-accordion-item {
  background-color: #0b1622;
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s, background-color 0.3s;
}

.wiki-accordion-header {
  padding: 18px 24px;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none; /* 移除原生小三角 */
  user-select: none;
}

.wiki-accordion-header::-webkit-details-marker {
  display: none; /* 兼容小内核浏览器移除三角 */
}

.accordion-arrow {
  font-size: 10px;
  color: #8c97a0;
  transition: transform 0.3s ease, color 0.3s;
}

/* 展开后的主体渲染框 */
.wiki-accordion-body {
  padding: 0 24px 24px 24px;
  font-size: 13px;
  color: #8c97a0;
  line-height: 1.7;
  border-top: 1px solid rgba(255, 255, 255, 0.01);
}

.wiki-accordion-body p {
  margin-bottom: 12px;
}

.wiki-accordion-body h4 {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin: 18px 0 8px 0;
}

/* 列表美化 */
.wiki-bullet-list, .wiki-numbered-list {
  padding-left: 20px;
  margin-bottom: 14px;
}

.wiki-bullet-list li, .wiki-numbered-list li {
  margin-bottom: 6px;
}

.wiki-bullet-list li::marker {
  color: #e31c25; /* 专属品牌红列表点 */
}

/* 激活状态下的折叠项动画反馈 */
.wiki-accordion-item[open] {
  border-color: rgba(227, 28, 37, 0.2);
  background-color: #0d1d2d;
}

.wiki-accordion-item[open] .accordion-arrow {
  transform: rotate(180deg); /* 箭头平滑向上翻转 */
  color: #e31c25;
}

/* ==========================================================================
   响应式流式屏幕尺寸优化断点
   ========================================================================== */
@media (max-width: 550px) {
  .counter-number {
    font-size: 26px;
  }
  .wiki-accordion-header {
    padding: 14px 18px;
    font-size: 13px;
  }
  .wiki-accordion-body {
    padding: 0 18px 18px 18px;
  }
}

/* ==========================================================================
   BRAVO.BET FOOTER LOGO STYLING (Custom Brand Accent)
   ========================================================================== */

.footer-logo {
  font-size: 28px;               /* Dominant, high-readability branding size */
  font-weight: 900;              /* Ultra-bold stroke weight matching the brand image */
  font-style: italic;            /* Forward-leaning italicized slant for racing/sports aesthetic */
  text-transform: uppercase;     /* Forces all caps to preserve corporate structural alignment */
  color: #ffffff;                /* Crisp base white for the primary 'BRAVO' text */
  letter-spacing: 0.5px;         /* Tight, aggressive spacing common in gaming layouts */
  display: inline-block;
  user-select: none;             /* Prevents accidental text-selection highlights */
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

/* Specific styling for the '.BET' domain extension span segment */
.footer-logo span {
  color: #e31c25;                /* Exact signature Bravo Red brand color accent */
  font-weight: 900;
  position: relative;
}

/* ==========================================================================
   Gempak99 Inspired Hover Interactivity (Neon Radial Micro-Glow)
   ========================================================================== */
.footer-logo:hover {
  transform: scale(1.03) skewX(-2deg); /* Dynamic forward pop interaction upon user hover */
  
  /* Applies an advanced layered neon diffuse shadow to blend cleanly into dark backdrops */
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.15),
               0 0 20px rgba(227, 28, 37, 0.4);
}

/* ==========================================================================
   CASSINO BRASILEIRO STYLES (全新本土化特色游戏滑块样式)
   ========================================================================== */

/* 头部操作区复合对齐 */
.native-cassino-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.native-cassino-section .section-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.section-nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 完美还原图中金铜色极简边框的 VER TODOS 按钮 */
.see-all-btn {
  color: #ffffff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.see-all-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #ffffff;
}

/* 完美的左右箭头装饰组样式 */
.slider-arrow-group {
  display: flex;
  gap: 8px;
}

.arrow-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #8c97a0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s ease;
}

.arrow-nav:hover {
  color: #ffffff;
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.03);
}

/* --------------------------------------------------------------------------
   卡片复合矩阵架构 (双行文字特调)
   -------------------------------------------------------------------------- */
.native-game-card {
  flex: 0 0 240px;            /* ⚡ 固定卡片宽度，确保在 16:9 横版大图下比例极度协调 */
  display: flex;
  flex-direction: column;
  gap: 10px;                  /* 图片与下方文字之间的呼吸间距 */
}

/* 游戏海报媒体框 */
.native-card-media {
  width: 100%;
  aspect-ratio: 1.6 / 1;      /* 严格对应截图里的 16:9 横版游戏海报黄金比例 */
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 悬停动效：触发品牌红霓虹外发光 */
.native-game-card:hover .native-card-media {
  transform: translateY(-4px);
  border-color: rgba(227, 28, 37, 0.4);
  box-shadow: 0 10px 20px rgba(227, 28, 37, 0.15);
}

/* 底部精细化文本信息座 */
.native-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 2px;
}

.native-game-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    /* 当文字过长时自动缩减为高档的省略号 ... */
}

.native-provider-name {
  font-size: 11px;
  color: #8c97a0;             /* 融入暗色环境的灰色供应商小字 */
  font-weight: 600;
}

/* 手机端自适应尺寸微调 */
@media (max-width: 550px) {
  .native-game-card {
    flex: 0 0 180px;          /* 手机窄屏下自动缩减卡片宽度，防止过大占用空间 */
  }
  .native-game-title {
    font-size: 12px;
  }
}

a.logo, 
a.footer-logo,
a.logo:visited,
a.footer-logo:visited {
  color: #ffffff !important;          /* 强行锁死主文本 'BRAVO' 为纯白色 */
  text-decoration: none !important;   /* 彻底拔除浏览器自带的恶心下划线 */
}

/* 2. 强行把 .BET 域名的红点和后缀从紫色的深渊里拉回来 */
a.logo span, 
a.footer-logo span,
a.logo:visited span,
a.footer-logo:visited span {
  color: #e31c25 !important;          /* 强行锁死为你的 Bravo Red 专属品牌红 */
}

/* 3. 继承并完美激活你原本写的悬停发光动画 */
a.logo:hover,
a.footer-logo:hover {
  text-decoration: none !important;
}

/* ==========================================================================
   控制营销文本区域超链接显色重置（防止变成恶心的紫色）
   ========================================================================== */

/* 强制让未访问、已访问的链接都死锁为纯白色 */
.text-content-section .content-box a,
.text-content-section .content-box a:visited {
  color: #ffffff !important;
  text-decoration: underline !important; /* 保持下划线方便用户识别 */
  font-weight: 700;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* 鼠标悬停（Hover）时触发 Bravo 品牌标志性的亮红色发光，视觉体验极佳 */
.text-content-section .content-box a:hover {
  color: #e31c25 !important;
  text-shadow: 0 0 8px rgba(227, 28, 37, 0.6);
  text-decoration: underline !important;
}