/* V195: the stable KL8 quick-indicator ball is the exact visual authority for
   KL8, SSQ and DLT quick controls, calculators and rotation matrices. */
html body :is(
  #kl8NumberGrid .digit-button,
  .digit-buttons.is-lotto .digit-button,
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  [data-desktop-compact-editor="ssq"] .desktop-lotto-number,
  [data-desktop-compact-editor="dlt"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #lottoRotationMatrix .lotto-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-ssq .mobile-lotto-ball,
  #screen-calculator-dlt .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number,
  #screen-calculator-ssq .mobile-matrix-number,
  #screen-calculator-dlt .mobile-matrix-number,
  .mobile-set-panel .mobile-matrix-number
) {
  border-color: #59626b !important;
  background-color: #30363c !important;
  background-image: linear-gradient(160deg, #4b5259 0%, #3a4046 35%, #292f35 70%, #20252a 100%) !important;
  color: var(--official-ball-color) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .9) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.13), inset 0 -2px 2px rgba(0,0,0,.46), 0 2px 2px rgba(0,0,0,.36) !important;
  filter: none !important;
  transform: none !important;
}

html body :is(
  #kl8NumberGrid .digit-button,
  .digit-buttons.is-lotto .digit-button,
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  [data-desktop-compact-editor="ssq"] .desktop-lotto-number,
  [data-desktop-compact-editor="dlt"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #lottoRotationMatrix .lotto-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-ssq .mobile-lotto-ball,
  #screen-calculator-dlt .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number,
  #screen-calculator-ssq .mobile-matrix-number,
  #screen-calculator-dlt .mobile-matrix-number,
  .mobile-set-panel .mobile-matrix-number
):hover {
  border-color: #69747e !important;
  background-image: linear-gradient(160deg, #5a636b 0%, #454c53 35%, #30373e 70%, #242a30 100%) !important;
  color: var(--official-ball-color) !important;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.2), inset 0 -2px 2px rgba(0,0,0,.44), 0 3px 4px rgba(0,0,0,.44) !important;
  filter: brightness(1.08) !important;
  transform: translateY(-1px) scale(1.015) !important;
}

html body :is(
  #kl8NumberGrid .digit-button,
  .digit-buttons.is-lotto .digit-button,
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  [data-desktop-compact-editor="ssq"] .desktop-lotto-number,
  [data-desktop-compact-editor="dlt"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #lottoRotationMatrix .lotto-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-ssq .mobile-lotto-ball,
  #screen-calculator-dlt .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number,
  #screen-calculator-ssq .mobile-matrix-number,
  #screen-calculator-dlt .mobile-matrix-number,
  .mobile-set-panel .mobile-matrix-number
):is([aria-pressed="true"], .is-selected) {
  border-color: var(--official-ball-border) !important;
  background-color: var(--official-ball-selected-middle) !important;
  background-image: linear-gradient(155deg, var(--official-ball-selected-top) 0%, var(--official-ball-selected-middle) 48%, var(--official-ball-selected-bottom) 100%) !important;
  color: var(--official-ball-selected-text) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.7) !important;
  box-shadow: inset 0 4px 3px rgba(255,255,255,.68), inset 2px 0 2px rgba(255,255,255,.2), inset 0 -5px 3px rgba(0,0,0,.5), 0 4px 0 #111820, 0 0 0 2px var(--official-ball-selected-shadow), 0 7px 13px var(--official-ball-selected-shadow) !important;
  filter: brightness(1.17) saturate(1.28) !important;
  transform: translateY(-3px) scale(1.045) !important;
  transition: none !important;
}

html body :is(
  #kl8NumberGrid .digit-button,
  .digit-buttons.is-lotto .digit-button,
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  [data-desktop-compact-editor="ssq"] .desktop-lotto-number,
  [data-desktop-compact-editor="dlt"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #lottoRotationMatrix .lotto-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-ssq .mobile-lotto-ball,
  #screen-calculator-dlt .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number,
  #screen-calculator-ssq .mobile-matrix-number,
  #screen-calculator-dlt .mobile-matrix-number,
  .mobile-set-panel .mobile-matrix-number
)::before,
html body :is(
  #kl8NumberGrid .digit-button,
  .digit-buttons.is-lotto .digit-button,
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  [data-desktop-compact-editor="ssq"] .desktop-lotto-number,
  [data-desktop-compact-editor="dlt"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #lottoRotationMatrix .lotto-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-ssq .mobile-lotto-ball,
  #screen-calculator-dlt .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number,
  #screen-calculator-ssq .mobile-matrix-number,
  #screen-calculator-dlt .mobile-matrix-number,
  .mobile-set-panel .mobile-matrix-number
)::after {
  content: none !important;
  display: none !important;
}

/* Historical calculator layers use duplicated IDs. Match their specificity so
   calculator and matrix states remain byte-for-byte equal to the quick ball. */
html body #indicatorDrawer#indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator:is([data-desktop-unified-calculator="kl8"],[data-desktop-unified-calculator="ssq"],[data-desktop-unified-calculator="dlt"])
:is(.desktop-lotto-number, .kl8-rotation-number, .lotto-rotation-number):hover,
html body #screen-calculator-kl8#screen-calculator-kl8#screen-calculator-kl8 :is(.mobile-lotto-ball, .mobile-matrix-number):hover,
html body #screen-calculator-ssq#screen-calculator-ssq#screen-calculator-ssq :is(.mobile-lotto-ball, .mobile-matrix-number):hover,
html body #screen-calculator-dlt#screen-calculator-dlt#screen-calculator-dlt :is(.mobile-lotto-ball, .mobile-matrix-number):hover {
  border-color: #69747e !important;
  background-color: #3a4249 !important;
  background-image: linear-gradient(160deg, #5a636b 0%, #454c53 35%, #30373e 70%, #242a30 100%) !important;
  color: var(--official-ball-color) !important;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.2), inset 0 -2px 2px rgba(0,0,0,.44), 0 3px 4px rgba(0,0,0,.44) !important;
  filter: brightness(1.08) !important;
  transform: translateY(-1px) scale(1.015) !important;
}

html body #indicatorDrawer#indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator:is([data-desktop-unified-calculator="kl8"],[data-desktop-unified-calculator="ssq"],[data-desktop-unified-calculator="dlt"])
:is(.desktop-lotto-number, .kl8-rotation-number, .lotto-rotation-number):is([aria-pressed="true"], .is-selected),
html body #screen-calculator-kl8#screen-calculator-kl8#screen-calculator-kl8 :is(.mobile-lotto-ball, .mobile-matrix-number):is([aria-pressed="true"], .is-selected),
html body #screen-calculator-ssq#screen-calculator-ssq#screen-calculator-ssq :is(.mobile-lotto-ball, .mobile-matrix-number):is([aria-pressed="true"], .is-selected),
html body #screen-calculator-dlt#screen-calculator-dlt#screen-calculator-dlt :is(.mobile-lotto-ball, .mobile-matrix-number):is([aria-pressed="true"], .is-selected) {
  border-color: var(--official-ball-border) !important;
  background-color: var(--official-ball-selected-middle) !important;
  background-image: linear-gradient(155deg, var(--official-ball-selected-top) 0%, var(--official-ball-selected-middle) 48%, var(--official-ball-selected-bottom) 100%) !important;
  color: var(--official-ball-selected-text) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.7) !important;
  box-shadow: inset 0 4px 3px rgba(255,255,255,.68), inset 2px 0 2px rgba(255,255,255,.2), inset 0 -5px 3px rgba(0,0,0,.5), 0 4px 0 #111820, 0 0 0 2px var(--official-ball-selected-shadow), 0 7px 13px var(--official-ball-selected-shadow) !important;
  filter: brightness(1.17) saturate(1.28) !important;
  transform: translateY(-3px) scale(1.045) !important;
  transition: none !important;
}

html:root:root:root:root body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator
:is(.desktop-lotto-number, .kl8-rotation-number, .lotto-rotation-number)
:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest)
:is([aria-pressed="true"], .is-selected),
html:root:root:root:root body :is(#screen-calculator-kl8,#screen-calculator-ssq,#screen-calculator-dlt)
:is(.mobile-lotto-ball,.mobile-matrix-number)
:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest)
:is([aria-pressed="true"], .is-selected) {
  border-color: var(--official-ball-border) !important;
  background-color: var(--official-ball-selected-middle) !important;
  background-image: linear-gradient(155deg, var(--official-ball-selected-top) 0%, var(--official-ball-selected-middle) 48%, var(--official-ball-selected-bottom) 100%) !important;
  color: var(--official-ball-selected-text) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.7) !important;
  box-shadow: inset 0 4px 3px rgba(255,255,255,.68), inset 2px 0 2px rgba(255,255,255,.2), inset 0 -5px 3px rgba(0,0,0,.5), 0 4px 0 #111820, 0 0 0 2px var(--official-ball-selected-shadow), 0 7px 13px var(--official-ball-selected-shadow) !important;
  filter: brightness(1.17) saturate(1.28) !important;
  transform: translateY(-3px) scale(1.045) !important;
  transition: none !important;
}

html:root:root:root:root body #indicatorDrawer#indicatorDrawer#indicatorDrawer
#desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator
#lottoRotationMatrix#lottoRotationMatrix .lotto-rotation-zone[data-zone-key]
.lotto-rotation-number:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest)
:is([aria-pressed="true"], .is-selected) {
  border-color: var(--official-ball-border) !important;
  background-color: var(--official-ball-selected-middle) !important;
  background-image: linear-gradient(155deg, var(--official-ball-selected-top) 0%, var(--official-ball-selected-middle) 48%, var(--official-ball-selected-bottom) 100%) !important;
  color: var(--official-ball-selected-text) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.7) !important;
  box-shadow: inset 0 4px 3px rgba(255,255,255,.68), inset 2px 0 2px rgba(255,255,255,.2), inset 0 -5px 3px rgba(0,0,0,.5), 0 4px 0 #111820, 0 0 0 2px var(--official-ball-selected-shadow), 0 7px 13px var(--official-ball-selected-shadow) !important;
  filter: brightness(1.17) saturate(1.28) !important;
}