/* Lottery Ball Styles - 扁平设计 */
.ball-3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 4px 8px;
  font-weight: bold;
  font-size: 15px;
  color: #fff; /* 确保所有模式下都使用白色字体 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background-color: #8b5cf6;
  transition: transform 0.2s ease-out;
}

/* 移除3D效果的高光 */
.ball-3d::after {
  display: none;
}

.ball-3d:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 香港六合彩波色 */
/* 红波: 1, 2, 7, 8, 12, 13, 18, 19, 23, 24, 29, 30, 34, 35, 40, 45, 46 */
.ball-3d[data-number="1"],
.ball-3d[data-number="2"],
.ball-3d[data-number="7"],
.ball-3d[data-number="8"],
.ball-3d[data-number="12"],
.ball-3d[data-number="13"],
.ball-3d[data-number="18"],
.ball-3d[data-number="19"],
.ball-3d[data-number="23"],
.ball-3d[data-number="24"],
.ball-3d[data-number="29"],
.ball-3d[data-number="30"],
.ball-3d[data-number="34"],
.ball-3d[data-number="35"],
.ball-3d[data-number="40"],
.ball-3d[data-number="45"],
.ball-3d[data-number="46"] {
  background-color: #ef4444; /* 红波 */
}

/* 蓝波: 3, 4, 9, 10, 14, 15, 20, 25, 26, 31, 36, 37, 41, 42, 47, 48 */
.ball-3d[data-number="3"],
.ball-3d[data-number="4"],
.ball-3d[data-number="9"],
.ball-3d[data-number="10"],
.ball-3d[data-number="14"],
.ball-3d[data-number="15"],
.ball-3d[data-number="20"],
.ball-3d[data-number="25"],
.ball-3d[data-number="26"],
.ball-3d[data-number="31"],
.ball-3d[data-number="36"],
.ball-3d[data-number="37"],
.ball-3d[data-number="41"],
.ball-3d[data-number="42"],
.ball-3d[data-number="47"],
.ball-3d[data-number="48"] {
  background-color: #3b82f6; /* 蓝波 */
}

/* 绿波: 5, 6, 11, 16, 17, 21, 22, 27, 28, 32, 33, 38, 39, 43, 44, 49 */
.ball-3d[data-number="5"],
.ball-3d[data-number="6"],
.ball-3d[data-number="11"],
.ball-3d[data-number="16"],
.ball-3d[data-number="17"],
.ball-3d[data-number="21"],
.ball-3d[data-number="22"],
.ball-3d[data-number="27"],
.ball-3d[data-number="28"],
.ball-3d[data-number="32"],
.ball-3d[data-number="33"],
.ball-3d[data-number="38"],
.ball-3d[data-number="39"],
.ball-3d[data-number="43"],
.ball-3d[data-number="44"],
.ball-3d[data-number="49"] {
  background-color: #22c55e; /* 绿波 */
}

/* Special number ball - 使用金色 */
.ball-3d.special {
  background-color: #f59e0b; /* 金色 */
  font-weight: 700;
  /* 保持與普通球相同大小 */
  width: 40px;
  height: 40px;
  font-size: 18px;
}

/* Special number plus sign */
.special-number-container {
  display: inline-flex;
  align-items: center;
}

.special-number-plus {
  font-size: 20px;
  font-weight: bold;
  margin: 0 4px;
  color: #f59e0b; /* 匹配特别号码球的金色 */
}

/* Animation for newly drawn balls */
@keyframes ballPop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.ball-3d.new {
  animation: ballPop 0.5s ease-out forwards;
}

/* 确保最近10期开奖结果的球号码在所有模式下都使用白色字体 */
#recent-draws-body .ball-3d {
  color: #ffffff !important; /* 强制使用白色字体 */
}

/* Responsive sizes - 进一步增大手机版球体和字体大小，特别是最近10期开奖结果和过往结果页面 */
@media (max-width: 768px) {
  .ball-3d {
    width: 38px;
    height: 38px;
    font-size: 17px;
    margin: 0 4px 8px;
  }

  /* 为最近10期开奖结果增大球体和字体 */
  #recent-draws-body .ball-3d {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }

  /* 为过往结果页面的特别号码保持与普通球相同大小 */
  .special-number-container .ball-3d.special {
    width: 38px;
    height: 38px;
    font-size: 17px;
    font-weight: 700;
    min-width: 38px; /* 确保不会被压缩 */
  }

  /* 特别号码的加号 */
  .special-number-plus {
    font-size: 20px;
    margin: 0 4px;
    font-weight: 700;
  }

  /* 确保特别号码容器有足够空间 */
  .special-number-container {
    min-width: fit-content;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .ball-3d {
    width: 34px;
    height: 34px;
    font-size: 15px;
    margin: 0 3px 6px;
  }

  /* 为最近10期开奖结果增大球体和字体 */
  #recent-draws-body .ball-3d {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  /* 为过往结果页面的特别号码保持与普通球相同大小 */
  .special-number-container .ball-3d.special {
    width: 34px;
    height: 34px;
    font-size: 15px;
    font-weight: 700;
    min-width: 34px; /* 确保不会被压缩 */
  }

  /* 特别号码的加号 */
  .special-number-plus {
    font-size: 18px;
    margin: 0 4px;
    font-weight: 700;
  }
}