/* 28-game board: one compact information panel. */
#webApp .draw-card.draw-page .draw-page__board,
#webApp[class] .draw-card.draw-page .draw-page__board {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 10px 7px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 0 12px 12px !important;
  background: linear-gradient(135deg, #7188f2 0%, #5c74df 54%, #465fc8 100%) !important;
  box-shadow: 0 5px 12px rgba(40, 58, 132, 0.14) !important;
  overflow: hidden !important;
}

#webApp .draw-card.draw-page .draw-page__board::before,
#webApp .draw-card.draw-page .draw-page__board::after {
  display: none !important;
}

#webApp .draw-card.draw-page .draw-page__board-top,
#webApp[class] .draw-card.draw-page .draw-page__board-top {
  box-sizing: border-box !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 3px 6px 6px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
}

#webApp .draw-card.draw-page .draw-page__expect {
  min-width: 0 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#webApp .draw-card.draw-page .draw-page__timer {
  min-width: 0 !important;
  display: grid !important;
  justify-items: end !important;
  gap: 3px !important;
}

#webApp .draw-card.draw-page .draw-page__timer-info {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#webApp .draw-card.draw-page .draw-page__timer-info strong {
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

#webApp .draw-card.draw-page .draw-page__timer-slots {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

#webApp .draw-card.draw-page .draw-page__timer-slot {
  box-sizing: border-box !important;
  width: 27px !important;
  min-width: 27px !important;
  height: 25px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 7px !important;
  color: #24304f !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 2px 5px rgba(24, 39, 111, 0.12) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#webApp .draw-card.draw-page .draw-page__result-panel,
#webApp[class] .draw-card.draw-page .draw-page__result-panel {
  box-sizing: border-box !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 6px !important;
  display: grid !important;
  grid-template-columns: minmax(98px, 1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

#webApp .draw-card.draw-page .draw-page__result-meta {
  min-width: 0 !important;
  display: grid !important;
  justify-items: start !important;
  gap: 3px !important;
  color: #ffffff !important;
}

#webApp .draw-card.draw-page .draw-page__result-meta strong {
  max-width: 100% !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#webApp .draw-card.draw-page .draw-page__result-meta span {
  padding: 3px 7px !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#webApp .draw-card.draw-page .draw-page__result-row {
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 4px !important;
}

#webApp .draw-card.draw-page .draw-page__result-panel .number-box {
  box-sizing: border-box !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 40px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  background: #17191f !important;
  box-shadow: 0 2px 5px rgba(15, 20, 38, 0.22) !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#webApp .draw-card.draw-page .draw-page__result-panel .number-box--sum {
  color: #ffffff !important;
}

/* The three pending digits are equal-speed ten-face wheels. */
#webApp .draw-card.draw-page .draw-page__result-panel .number-box--pending {
  position: relative !important;
  overflow: hidden !important;
  color: #ffffff !important;
  background: #17191f !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  text-shadow: none !important;
}

#webApp .draw-card.draw-page .draw-page__result-panel .number-box--pending::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.32) 0%,
    rgba(0, 0, 0, 0) 28%,
    rgba(0, 0, 0, 0) 72%,
    rgba(0, 0, 0, 0.32) 100%
  );
}

#webApp .draw-card.draw-page .draw-page__result-panel .number-box--locked::after {
  display: none;
}

#webApp .draw-card.draw-page .digit-tumbler {
  --tumbler-radius: 46px;
  --tumbler-start-angle: calc(var(--tumbler-index, 0) * -108deg);
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  perspective: 190px;
  perspective-origin: 50% 50%;
}

#webApp .draw-card.draw-page .digit-tumbler__wheel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  animation-name: pendingDigitAccelerate, pendingDigitTumble;
  animation-duration: 2.4s, 1.2s !important;
  animation-timing-function: cubic-bezier(0.42, 0, 1, 1), linear;
  animation-delay: 0s, 2.4s;
  animation-iteration-count: 1, infinite !important;
  animation-fill-mode: forwards, none;
  animation-play-state: running !important;
  will-change: transform;
}

#webApp .draw-card.draw-page .digit-tumbler__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 25px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotateX(calc(var(--face-index) * 36deg)) translateZ(var(--tumbler-radius));
  transform: rotateX(calc(var(--face-index) * 36deg)) translateZ(var(--tumbler-radius));
}

#webApp .draw-card.draw-page .number-box--sum.number-box--pending {
  width: 42px !important;
  min-width: 42px !important;
}

#webApp .draw-card.draw-page .digit-tumbler--sum .digit-tumbler__face {
  font-size: 21px;
}

@keyframes pendingDigitAccelerate {
  from {
    transform: rotateX(var(--tumbler-start-angle));
  }
  to {
    transform: rotateX(calc(var(--tumbler-start-angle) - 540deg));
  }
}

@keyframes pendingDigitTumble {
  0%,
  6% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 540deg));
  }

  10%,
  16% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 576deg));
  }

  20%,
  26% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 612deg));
  }

  30%,
  36% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 648deg));
  }

  40%,
  46% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 684deg));
  }

  50%,
  56% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 720deg));
  }

  60%,
  66% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 756deg));
  }

  70%,
  76% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 792deg));
  }

  80%,
  86% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 828deg));
  }

  90%,
  96% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 864deg));
  }

  100% {
    transform: rotateX(calc(var(--tumbler-start-angle) - 900deg));
  }
}

#webApp .draw-card.draw-page .draw-page__result-panel .operator {
  min-width: 10px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#webApp .draw-card.draw-page .draw-page__user-strip,
#webApp[class] .draw-card.draw-page .draw-page__user-strip {
  box-sizing: border-box !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 7px 4px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
}

#webApp .draw-card.draw-page .draw-page__user-card {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#webApp .draw-card.draw-page .draw-page__user-avatar {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border: 2px solid #ffffff !important;
  color: #28355d !important;
  background: radial-gradient(circle at 35% 25%, #fff7e5 0%, #d6a53b 42%, #6f4708 100%) !important;
  box-shadow: 0 3px 8px rgba(24, 39, 111, 0.16) !important;
  font-size: 20px !important;
}

#webApp .draw-card.draw-page .draw-page__composer-label {
  color: #f4d887 !important;
  background: rgba(214, 165, 59, 0.18) !important;
}

#webApp .draw-card.draw-page .draw-page__user-meta {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#webApp .draw-card.draw-page .draw-page__user-meta strong {
  max-width: 100% !important;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#webApp .draw-card.draw-page .draw-page__user-balance {
  min-width: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#webApp .draw-card.draw-page .draw-page__user-balance b {
  min-width: 0 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#webApp .draw-card.draw-page .draw-page__user-actions {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#webApp .draw-card.draw-page .draw-page__user-actions button {
  box-sizing: border-box !important;
  min-width: 50px !important;
  height: 34px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  border-radius: 8px !important;
  color: #25304b !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#webApp .draw-card.draw-page .draw-page__user-actions button:nth-child(n + 2) {
  color: #25304b !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

@media (max-width: 380px) {
  #webApp .draw-card.draw-page .draw-page__board,
  #webApp[class] .draw-card.draw-page .draw-page__board {
    padding-right: 7px !important;
    padding-left: 7px !important;
  }

  #webApp .draw-card.draw-page .draw-page__result-panel {
    grid-template-columns: minmax(92px, 1fr) auto !important;
    gap: 5px !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  #webApp .draw-card.draw-page .draw-page__result-panel .number-box {
    width: 32px !important;
    min-width: 32px !important;
    height: 38px !important;
    font-size: 23px !important;
  }

  #webApp .draw-card.draw-page .digit-tumbler {
    --tumbler-radius: 44px;
  }

  #webApp .draw-card.draw-page .digit-tumbler__face {
    font-size: 23px;
  }

  #webApp .draw-card.draw-page .number-box--sum.number-box--pending {
    width: 40px !important;
    min-width: 40px !important;
  }

  #webApp .draw-card.draw-page .digit-tumbler--sum .digit-tumbler__face {
    font-size: 19px;
  }

  #webApp .draw-card.draw-page .draw-page__result-row {
    gap: 3px !important;
  }

  #webApp .draw-card.draw-page .draw-page__user-strip {
    gap: 6px !important;
    padding-right: 2px !important;
    padding-left: 2px !important;
  }

  #webApp .draw-card.draw-page .draw-page__user-avatar {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  #webApp .draw-card.draw-page .draw-page__user-actions {
    gap: 4px !important;
  }

  #webApp .draw-card.draw-page .draw-page__user-actions button {
    min-width: 46px !important;
    height: 32px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }
}

/* 28 rules use a readable bottom sheet without a visible scrollbar. */
#webApp .draw-info-modal--rules {
  place-items: end center;
}

#webApp .draw-info-modal--rules .draw-info-modal__backdrop {
  background: rgba(15, 24, 43, 0.58);
}

#webApp .draw-info-modal--rules .draw-info-panel--rules {
  align-self: end;
  box-sizing: border-box;
  width: min(100%, 430px);
  max-height: min(72dvh, 620px);
  margin: 0;
  padding: 24px 24px calc(26px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0 !important;
  border-radius: 0 !important;
  color: #31486f !important;
  background: #ffffff !important;
  box-shadow: 0 -16px 40px rgba(15, 29, 55, 0.2) !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#webApp .draw-info-modal--rules .draw-info-panel--rules::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#webApp .draw-info-modal--rules .draw-info-panel__close {
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #aab3c1 !important;
  background: transparent !important;
  font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif !important;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  text-shadow: none;
}

#webApp .draw-info-modal--rules .rules-content,
#webApp .draw-info-modal--rules .rules-content * {
  color: #31486f !important;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

#webApp .draw-info-modal--rules .rules-content {
  box-sizing: border-box;
  padding: 0 34px 0 0;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.78;
  overflow-wrap: anywhere;
}

@media (max-width: 380px) {
  #webApp .draw-info-modal--rules .draw-info-panel--rules {
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  }

  #webApp .draw-info-modal--rules .rules-content {
    padding-right: 32px;
    font-size: 15px;
    line-height: 1.74;
  }
}