/* KL8 five-level temperature language: neutral dark balls before selection,
   full high-saturation temperature surfaces after selection. */
html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
):is(
  .number-temperature-hottest,
  .number-temperature-hot,
  .number-temperature-warm,
  .number-temperature-cold,
  .number-temperature-coldest
):not([aria-pressed="true"]):not(.is-selected) {
  border: 1px solid #090e13 !important;
  border-radius: 50% !important;
  background: #171c21 !important;
  background-image: linear-gradient(180deg, #242a30 0%, #171c21 48%, #0d1115 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 -2px 0 rgba(0,0,0,.48), 0 1px 2px rgba(0,0,0,.38) !important;
  filter: none !important;
  text-shadow: 0 1px 1px #000, 0 0 4px currentColor !important;
  transform: none !important;
}

/* Final precedence over the historical all-purple KL8 selection layer. */
html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"]
.desktop-lotto-number.number-temperature-hottest:is([aria-pressed="true"],.is-selected),
html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator
.desktop-kl8-rotation-host .kl8-rotation-number.number-temperature-hottest[aria-pressed="true"],
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-lotto-ball.number-temperature-hottest:is([aria-pressed="true"],.is-selected),
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-matrix-number.number-temperature-hottest[aria-pressed="true"] {
  border: 2px solid #8e001c !important;
  background: #f3133d !important;
  background-image: linear-gradient(180deg, #ff526d 0%, #f3133d 52%, #b90025 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(70,0,13,.88) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(96,0,18,.38), 0 0 0 2px rgba(255,73,101,.22) !important;
}

html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"]
.desktop-lotto-number.number-temperature-hot:is([aria-pressed="true"],.is-selected),
html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator
.desktop-kl8-rotation-host .kl8-rotation-number.number-temperature-hot[aria-pressed="true"],
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-lotto-ball.number-temperature-hot:is([aria-pressed="true"],.is-selected),
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-matrix-number.number-temperature-hot[aria-pressed="true"] {
  border: 2px solid #a93600 !important;
  background: #ff7100 !important;
  background-image: linear-gradient(180deg, #ffac31 0%, #ff7100 54%, #cf4300 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(77,25,0,.88) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(111,35,0,.36), 0 0 0 2px rgba(255,132,24,.2) !important;
}

html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"]
.desktop-lotto-number.number-temperature-warm:is([aria-pressed="true"],.is-selected),
html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator
.desktop-kl8-rotation-host .kl8-rotation-number.number-temperature-warm[aria-pressed="true"],
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-lotto-ball.number-temperature-warm:is([aria-pressed="true"],.is-selected),
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-matrix-number.number-temperature-warm[aria-pressed="true"] {
  border: 2px solid #9a6900 !important;
  background: #ffc400 !important;
  background-image: linear-gradient(180deg, #fff06a 0%, #ffc400 55%, #d38b00 100%) !important;
  color: #251b00 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.58) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.66), inset 0 -3px 0 rgba(118,74,0,.32), 0 0 0 2px rgba(255,213,45,.24) !important;
}

html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"]
.desktop-lotto-number.number-temperature-cold:is([aria-pressed="true"],.is-selected),
html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator
.desktop-kl8-rotation-host .kl8-rotation-number.number-temperature-cold[aria-pressed="true"],
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-lotto-ball.number-temperature-cold:is([aria-pressed="true"],.is-selected),
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-matrix-number.number-temperature-cold[aria-pressed="true"] {
  border: 2px solid #00688f !important;
  background: #08bdeb !important;
  background-image: linear-gradient(180deg, #66e7ff 0%, #08bdeb 54%, #007fae 100%) !important;
  color: #022331 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.48) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.58), inset 0 -3px 0 rgba(0,71,98,.34), 0 0 0 2px rgba(38,203,245,.22) !important;
}

html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"]
.desktop-lotto-number.number-temperature-coldest:is([aria-pressed="true"],.is-selected),
html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator
.desktop-kl8-rotation-host .kl8-rotation-number.number-temperature-coldest[aria-pressed="true"],
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-lotto-ball.number-temperature-coldest:is([aria-pressed="true"],.is-selected),
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-matrix-number.number-temperature-coldest[aria-pressed="true"] {
  border: 2px solid #003d9c !important;
  background: #1269ec !important;
  background-image: linear-gradient(180deg, #5aa5ff 0%, #1269ec 54%, #0045b7 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,28,78,.88) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,40,109,.36), 0 0 0 2px rgba(49,126,255,.22) !important;
}

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-hottest { --kl8-temperature-text: #8b343f; --kl8-temperature-marker: "●"; }
html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-hot { --kl8-temperature-text: #89542e; --kl8-temperature-marker: "◆"; }
html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-warm { --kl8-temperature-text: #8a7834; --kl8-temperature-marker: "◐"; }
html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-cold { --kl8-temperature-text: #346b7b; --kl8-temperature-marker: "◇"; }
html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-coldest { --kl8-temperature-text: #345487; --kl8-temperature-marker: "○"; }

html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"]
.desktop-lotto-number:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest):not([aria-pressed="true"]):not(.is-selected),
html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator
.desktop-kl8-rotation-host .kl8-rotation-number:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest):not([aria-pressed="true"]):not(.is-selected),
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-lotto-ball:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest):not([aria-pressed="true"]):not(.is-selected),
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-matrix-number:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest):not([aria-pressed="true"]):not(.is-selected) {
  border: 1px solid #090e13 !important;
  border-radius: 50% !important;
  background: #171c21 !important;
  background-image: linear-gradient(180deg, #242a30 0%, #171c21 48%, #0d1115 100%) !important;
  color: var(--kl8-temperature-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 -2px 0 rgba(0,0,0,.48), 0 1px 2px rgba(0,0,0,.38) !important;
  filter: none !important;
  text-shadow: 0 1px 1px #000 !important;
}

html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"]
.desktop-lotto-number:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest)::after,
html body #indicatorDrawer#indicatorDrawer #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator
.desktop-kl8-rotation-host .kl8-rotation-number:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest)::after,
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-lotto-ball:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest)::after,
html body #screen-calculator-kl8#screen-calculator-kl8 .mobile-matrix-number:is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest)::after {
  content: var(--kl8-temperature-marker) !important;
  color: currentColor !important;
}

.kl8-five-temperature-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 7px;
  margin: 5px 0 3px;
  color: #dce7ef;
  font-size: 10px;
  line-height: 1.35;
}
.kl8-five-temperature-legend span { position: relative; padding-left: 12px; font-weight: 900; }
.kl8-five-temperature-legend span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}
.kl8-five-temperature-legend [data-temperature-level="hottest"] { color: #ff3347; }
.kl8-five-temperature-legend [data-temperature-level="hot"] { color: #ff7a18; }
.kl8-five-temperature-legend [data-temperature-level="warm"] { color: #ffd21c; }
.kl8-five-temperature-legend [data-temperature-level="cold"] { color: #29c9f5; }
.kl8-five-temperature-legend [data-temperature-level="coldest"] { color: #398bff; }
.kl8-five-temperature-legend small { flex: 1 1 100%; color: #aabac7; font-size: 9px; }

@media (max-width:680px) {
  .kl8-five-temperature-legend { justify-content: center; margin-inline: 2px; font-size: 11px; }
  .kl8-five-temperature-legend small { text-align: center; }
}

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-hottest:not([aria-pressed="true"]):not(.is-selected) { color: #8b343f !important; }

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-hot:not([aria-pressed="true"]):not(.is-selected) { color: #89542e !important; }

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-warm:not([aria-pressed="true"]):not(.is-selected) { color: #8a7834 !important; }

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-cold:not([aria-pressed="true"]):not(.is-selected) { color: #346b7b !important; }

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-coldest:not([aria-pressed="true"]):not(.is-selected) { color: #345487 !important; }

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
):is(.number-temperature-hottest,.number-temperature-hot,.number-temperature-warm,.number-temperature-cold,.number-temperature-coldest)::after {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  right: 1px !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.8) !important;
  pointer-events: none !important;
}

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-hottest::after { content: "●" !important; }
html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-hot::after { content: "◆" !important; }
html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-warm::after { content: "◐" !important; }
html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-cold::after { content: "◇" !important; }
html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-coldest::after { content: "○" !important; }

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-hottest:is([aria-pressed="true"],.is-selected) {
  border: 2px solid #8e001c !important;
  background: #f3133d !important;
  background-image: linear-gradient(180deg, #ff526d 0%, #f3133d 52%, #b90025 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(96,0,18,.38), 0 0 0 2px rgba(255,73,101,.22) !important;
}

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-hot:is([aria-pressed="true"],.is-selected) {
  border: 2px solid #a93600 !important;
  background: #ff7100 !important;
  background-image: linear-gradient(180deg, #ffac31 0%, #ff7100 54%, #cf4300 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(111,35,0,.36), 0 0 0 2px rgba(255,132,24,.2) !important;
}

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-warm:is([aria-pressed="true"],.is-selected) {
  border: 2px solid #9a6900 !important;
  background: #ffc400 !important;
  background-image: linear-gradient(180deg, #fff06a 0%, #ffc400 55%, #d38b00 100%) !important;
  color: #251b00 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.58) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.66), inset 0 -3px 0 rgba(118,74,0,.32), 0 0 0 2px rgba(255,213,45,.24) !important;
}

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-cold:is([aria-pressed="true"],.is-selected) {
  border: 2px solid #00688f !important;
  background: #08bdeb !important;
  background-image: linear-gradient(180deg, #66e7ff 0%, #08bdeb 54%, #007fae 100%) !important;
  color: #022331 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.48) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.58), inset 0 -3px 0 rgba(0,71,98,.34), 0 0 0 2px rgba(38,203,245,.22) !important;
}

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .mobile-matrix-number
).number-temperature-coldest:is([aria-pressed="true"],.is-selected) {
  border: 2px solid #003d9c !important;
  background: #1269ec !important;
  background-image: linear-gradient(180deg, #5aa5ff 0%, #1269ec 54%, #0045b7 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,40,109,.36), 0 0 0 2px rgba(49,126,255,.22) !important;
}

html body :is(
  [data-desktop-compact-editor="kl8"] .desktop-lotto-number,
  .desktop-kl8-rotation-host .kl8-rotation-number,
  #screen-calculator-kl8 .mobile-lotto-ball,
  #screen-calculator-kl8 .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-radius: 50% !important;
  filter: brightness(1.05) saturate(1.14) !important;
  transform: none !important;
}