/* Final official-lottery calculator and rotation-matrix interaction layer. */
html body :is(
  #desktopUnifiedLotteryCalculator,
  .desktop-kl8-rotation-host,
  #lottoRotationMatrix
) button {
  opacity: 1 !important;
  border: 1px solid #6f8495 !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #879bae 0%, #65798c 100%) !important;
  color: #f7fafc !important;
  text-shadow: 0 1px 0 rgba(19, 34, 45, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(24,39,50,.34), 0 2px 4px rgba(10,23,32,.34) !important;
  transition: filter 110ms ease, border-color 110ms ease, box-shadow 110ms ease, transform 70ms ease !important;
}

html body :is(
  #desktopUnifiedLotteryCalculator,
  .desktop-kl8-rotation-host,
  #lottoRotationMatrix
) button:not(:disabled):is(:hover, :focus-visible) {
  filter: brightness(1.28) saturate(1.12) !important;
  border-color: #f4fbff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), inset 0 -2px 0 rgba(24,39,50,.28), 0 0 0 1px rgba(206,232,246,.55), 0 4px 8px rgba(8,20,29,.42) !important;
}

html body :is(
  #desktopUnifiedLotteryCalculator,
  .desktop-kl8-rotation-host,
  #lottoRotationMatrix
) button:not(:disabled):active {
  transform: translateY(2px) !important;
  filter: brightness(.92) saturate(1.14) !important;
  box-shadow: inset 0 3px 5px rgba(10,24,34,.48), 0 1px 1px rgba(255,255,255,.16) !important;
}

html body :is(
  #desktopUnifiedLotteryCalculator,
  .desktop-kl8-rotation-host,
  #lottoRotationMatrix
) button:is(.is-selected, .is-active, .is-command-active, [aria-pressed="true"], [aria-selected="true"]) {
  border-color: #b9dbff !important;
  background: linear-gradient(180deg, #5b97db 0%, #326bad 100%) !important;
  filter: brightness(1.1) saturate(1.16) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.48), inset 0 -2px 0 rgba(17,54,91,.32), 0 0 0 1px rgba(164,210,255,.62), 0 3px 7px rgba(7,29,50,.4) !important;
}

html body :is(
  #desktopUnifiedLotteryCalculator,
  .desktop-kl8-rotation-host,
  #lottoRotationMatrix
) button.ticket-copy-button {
  border-color: #9b521b !important;
  background: linear-gradient(180deg, #e58b35 0%, #c96c1d 100%) !important;
}

html body :is(
  #desktopUnifiedLotteryCalculator,
  .desktop-kl8-rotation-host,
  #lottoRotationMatrix
) button.ticket-promotion-image-button {
  border-color: #61768a !important;
  background: linear-gradient(180deg, #8499ad 0%, #657b90 100%) !important;
}

/* Successful inline feedback is already represented by selected controls and results.
   Keep only actionable errors visible so status layers never cover operation buttons. */
#desktopUnifiedLotteryCalculator .desktop-lotto-editor-status.has-feedback:not(.is-error) {
  display: none !important;
}

/* KL8 keeps temperature as the unselected state; selection must be unmistakable. */
#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"] .desktop-lotto-number-grid .desktop-lotto-number {
  border-radius: 50% !important;
}

#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"] .desktop-lotto-number-grid .desktop-lotto-number:is(.is-selected, [aria-pressed="true"]),
#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"] .desktop-lotto-number-grid .desktop-lotto-number:is(.is-selected, [aria-pressed="true"]):is(.number-temperature-hot, .number-temperature-warm, .number-temperature-cold) {
  border: 2px solid #fff0a6 !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #8a5cf0 0%, #5730b8 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px #26105c !important;
  outline: 2px solid #ffffff !important;
  outline-offset: 1px !important;
  box-shadow: inset 0 0 0 20px #6840ce, inset 0 1px 1px rgba(255,255,255,.68), 0 0 0 2px rgba(255,210,74,.8), 0 0 8px 3px rgba(121,79,229,.68) !important;
  filter: brightness(1.08) saturate(1.2) !important;
}

/* Status messages must never become a floating layer over KL8 operation buttons. */
#desktopUnifiedLotteryCalculator[data-desktop-unified-calculator="kl8"] .desktop-lotto-editor-status {
  display: none !important;
}

@keyframes official-copy-flash-v180 {
  0%, 100% { filter: brightness(1); }
  20%, 65% { filter: brightness(1.52) saturate(1.28); box-shadow: inset 0 0 0 2px rgba(255,255,255,.78), 0 0 13px 4px rgba(151,219,255,.72), 0 3px 7px rgba(7,29,50,.4); }
}

html body :is(
  #desktopUnifiedLotteryCalculator,
  .desktop-kl8-rotation-host,
  #lottoRotationMatrix
) button.is-copy-flash {
  animation: official-copy-flash-v180 600ms ease-in-out 2 !important;
}

html body :is(
  #desktopUnifiedLotteryCalculator,
  .desktop-kl8-rotation-host,
  #lottoRotationMatrix
) button.is-command-flash {
  animation: official-copy-flash-v180 140ms ease-in-out 2 !important;
}

html body :is(
  #indicatorDrawer#indicatorDrawer,
  #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator,
  [data-mobile-app]
) :is(
  .lotto-n-out-n-controls,
  .dan-custom-search-actions,
  .indicator-omission-controls,
  .historical-omission-controls--digit,
  .indicator-config__actions,
  .desktop-lotto-compact-editor > footer,
  .mobile-lotto-result-actions,
  .mobile-calc-result-actions
) > .ticket-local-multiplier {
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 2px !important;
  padding-inline: 2px !important;
}

html body :is(
  #indicatorDrawer#indicatorDrawer,
  #desktopUnifiedLotteryCalculator#desktopUnifiedLotteryCalculator,
  [data-mobile-app]
) :is(
  .lotto-n-out-n-controls,
  .dan-custom-search-actions,
  .indicator-omission-controls,
  .historical-omission-controls--digit,
  .indicator-config__actions,
  .desktop-lotto-compact-editor > footer,
  .mobile-lotto-result-actions,
  .mobile-calc-result-actions
) > .ticket-local-multiplier > input {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 34px !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 2px !important;
}
