/* TABLETWAKE2: compact shared Screen Wake Lock status for all tablet tournament flows. */
.dsdk-tablet-wake {
  position: fixed !important;
  top: max(9px, env(safe-area-inset-top)) !important;
  right: max(9px, env(safe-area-inset-right)) !important;
  z-index: 999990 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: auto !important;
  max-width: min(70vw, 230px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(78, 198, 116, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(9, 31, 20, 0.84) !important;
  color: rgba(244, 255, 248, 0.94) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24) !important;
  font: 650 11px/1.15 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  cursor: pointer !important;
  opacity: 0.9 !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease !important;
}

.dsdk-tablet-wake:hover,
.dsdk-tablet-wake:focus-visible {
  opacity: 1 !important;
  border-color: rgba(91, 221, 134, 0.58) !important;
  background: rgba(10, 40, 25, 0.94) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  outline: none !important;
  transform: none !important;
}

.dsdk-tablet-wake__dot {
  flex: 0 0 auto !important;
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  min-height: 7px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #9aa49e !important;
  box-shadow: 0 0 0 2px rgba(154, 164, 158, 0.12) !important;
}

.dsdk-tablet-wake__text {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Normal state stays deliberately subtle: this is status, not a primary action. */
.dsdk-tablet-wake--active {
  border-color: rgba(62, 190, 103, 0.38) !important;
  background: rgba(11, 48, 27, 0.82) !important;
  color: #e9fff0 !important;
}

.dsdk-tablet-wake--active .dsdk-tablet-wake__dot {
  background: #38c86c !important;
  box-shadow: 0 0 0 2px rgba(56, 200, 108, 0.15) !important;
}

/* States that may need attention remain a little more visible than ACTIVE. */
.dsdk-tablet-wake--pending,
.dsdk-tablet-wake--needs-action,
.dsdk-tablet-wake--hidden {
  border-color: rgba(239, 161, 39, 0.62) !important;
  background: rgba(55, 38, 10, 0.9) !important;
  color: #fff1cf !important;
  opacity: 0.98 !important;
}

.dsdk-tablet-wake--pending .dsdk-tablet-wake__dot,
.dsdk-tablet-wake--needs-action .dsdk-tablet-wake__dot,
.dsdk-tablet-wake--hidden .dsdk-tablet-wake__dot {
  background: #efa127 !important;
  box-shadow: 0 0 0 2px rgba(239, 161, 39, 0.18) !important;
}

.dsdk-tablet-wake--disabled {
  border-color: rgba(160, 172, 166, 0.38) !important;
  background: rgba(25, 29, 27, 0.88) !important;
  color: #d8dedb !important;
  opacity: 0.92 !important;
}

.dsdk-tablet-wake--unsupported {
  border-color: rgba(220, 92, 92, 0.64) !important;
  background: rgba(64, 19, 19, 0.92) !important;
  color: #ffe2e2 !important;
  opacity: 1 !important;
  cursor: default !important;
}

.dsdk-tablet-wake--unsupported .dsdk-tablet-wake__dot {
  background: #dc5c5c !important;
  box-shadow: 0 0 0 2px rgba(220, 92, 92, 0.18) !important;
}

@media (max-width: 680px) {
  .dsdk-tablet-wake {
    top: max(6px, env(safe-area-inset-top)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    max-width: min(76vw, 210px) !important;
    padding: 4px 7px !important;
    font-size: 10.5px !important;
    gap: 4px !important;
  }

  .dsdk-tablet-wake__dot {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    min-height: 6px !important;
  }
}

@media print {
  .dsdk-tablet-wake {
    display: none !important;
  }
}