/*
 * Path: assets/css/balls.css
 * 說明：彩票球樣式，提供主球、熱號、冷號、遺漏球與尺寸變化。
 */

.balls,
.balls-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ball {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.2px;
  color: #f4f8ff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.08) 18%, transparent 34%),
    radial-gradient(circle at 50% 120%, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.10) 42%, transparent 62%),
    linear-gradient(180deg, #2a4468 0%, #162843 52%, #0d1830 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -6px 12px rgba(0,0,0,0.22),
    0 8px 18px rgba(0,0,0,0.30);
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

.ball::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
}

.ball:hover {
  transform: translateY(-1px);
}

/* ===== 主球強調狀態 ===== */
.ball--active,
.ball-active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -6px 12px rgba(0,0,0,0.22),
    0 0 0 2px rgba(98, 208, 255, 0.18),
    0 10px 22px rgba(0,0,0,0.34);
}

/* ===== 熱號：橘紅 ===== */
.ball--hot,
.ball-hot {
  color: #fff8f4;
  border-color: rgba(255, 148, 94, 0.26);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 18%, transparent 34%),
    radial-gradient(circle at 50% 120%, rgba(85,12,0,0.30) 0%, rgba(85,12,0,0.08) 42%, transparent 62%),
    linear-gradient(180deg, #ffb066 0%, #ff7a59 45%, #ff4f72 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -6px 12px rgba(116,20,25,0.18),
    0 0 0 1px rgba(255, 108, 96, 0.18),
    0 10px 22px rgba(255, 93, 115, 0.24);
}

/* ===== 冷號：青藍 ===== */
.ball--cold,
.ball-cold {
  color: #f3feff;
  border-color: rgba(58, 214, 255, 0.24);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 18%, transparent 34%),
    radial-gradient(circle at 50% 120%, rgba(0,45,82,0.28) 0%, rgba(0,45,82,0.08) 42%, transparent 62%),
    linear-gradient(180deg, #58b8ff 0%, #16a8ff 42%, #11d7d0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -6px 12px rgba(0,48,78,0.18),
    0 0 0 1px rgba(45, 245, 212, 0.16),
    0 10px 22px rgba(45, 245, 212, 0.20);
}

/* ===== 遺漏/特殊：紫色 ===== */
.ball--miss,
.ball-miss {
  color: #faf7ff;
  border-color: rgba(157, 118, 255, 0.26);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 18%, transparent 34%),
    radial-gradient(circle at 50% 120%, rgba(46,18,96,0.28) 0%, rgba(46,18,96,0.08) 42%, transparent 62%),
    linear-gradient(180deg, #b08cff 0%, #8a63ff 45%, #5a49e6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -6px 12px rgba(49,22,95,0.18),
    0 0 0 1px rgba(138, 99, 255, 0.18),
    0 10px 22px rgba(106, 90, 205, 0.22);
}

/* ===== 命中/選取：綠青 ===== */
.ball--hit,
.ball-hit,
.ball--selected,
.ball-selected {
  color: #f4fffb;
  border-color: rgba(73, 233, 187, 0.26);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 18%, transparent 34%),
    radial-gradient(circle at 50% 120%, rgba(8,74,49,0.28) 0%, rgba(8,74,49,0.08) 42%, transparent 62%),
    linear-gradient(180deg, #57f0c1 0%, #1fd4a8 46%, #17a97f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -6px 12px rgba(8,74,49,0.18),
    0 0 0 1px rgba(45, 211, 111, 0.18),
    0 10px 22px rgba(45, 211, 111, 0.20);
}

/* ===== 尺寸 ===== */
.ball--sm,
.ball-sm {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  font-size: 12px;
}

.ball--lg,
.ball-lg {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 16px;
}

/* ===== 排行/統計球組 ===== */
.ball-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  margin-bottom: 10px;
}