/* Global balls standard
   default: dark/off + white text
   hit: gold glow + black text + slightly larger */

:root {
  --cc-ball-size: 1.9rem;
  --cc-ball-size-hit: 2.02rem;
}

.cc-ball-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.cc-ball,
.ball-3d,
.cc-proposal-ball,
.historical-pick {
  position: relative !important;
  display: inline-flex !important;
  width: var(--cc-ball-size);
  min-width: var(--cc-ball-size);
  height: var(--cc-ball-size);
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  border: 1px solid rgba(197, 216, 255, 0.26);
  color: #f6f9ff !important;
  font-weight: 800;
  font-size: 0.79rem;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.98);
  paint-order: stroke fill;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 50% 84%, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 54%),
    linear-gradient(168deg, #2f3a53 0%, #1f273a 44%, #121a2a 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.08),
    inset 0 -6px 10px rgba(0, 0, 0, 0.42),
    0 6px 14px rgba(0, 0, 0, 0.4);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 1px rgba(0, 0, 0, 0.92);
}

.cc-ball::after,
.ball-3d::after,
.cc-proposal-ball::after,
.historical-pick::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 24%;
  width: 24%;
  height: 24%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 74%);
  opacity: 0.2;
}

.cc-ball.cc-ball--hit,
.cc-ball--hit,
.ball-3d.is-hit,
.cc-proposal-ball.is-hit,
.historical-pick.is-hit,
.is-hit .cc-ball,
.is-hit.cc-ball {
  width: var(--cc-ball-size-hit);
  min-width: var(--cc-ball-size-hit);
  height: var(--cc-ball-size-hit);
  color: #121212 !important;
  border-color: rgba(255, 231, 167, 0.86) !important;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 44%),
    radial-gradient(circle at 54% 86%, rgba(133, 84, 0, 0.35), rgba(133, 84, 0, 0) 56%),
    linear-gradient(165deg, #ffe7b2 0%, #ffcf6f 45%, #cf8f1e 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.48),
    inset 0 -7px 11px rgba(130, 74, 0, 0.34),
    0 0 0 1px rgba(255, 216, 134, 0.38),
    0 8px 18px rgba(0, 0, 0, 0.44),
    0 0 22px rgba(255, 201, 95, 0.58);
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.98);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.86),
    0 0 1px rgba(0, 0, 0, 0.9);
}

.cc-table-wrap td .cc-ball-row {
  min-height: 2.1rem;
}

@media (max-width: 767px) {
  :root {
    --cc-ball-size: 1.72rem;
    --cc-ball-size-hit: 1.85rem;
  }
}