/* Shared Figma surfaces: 45776:268460 rules; 45098:15179 / 45532:33139 prizes;
   44814:3724 investment; 44894:230420 history; 44906:3210 / 45350:28709 ticket sources. */
.activity-sheet,
.ticket-dialog,
#activity-rule-dialog {
  box-sizing: border-box;
  font-family: inherit;
}

.activity-sheet *,
.ticket-dialog *,
#activity-rule-dialog * {
  box-sizing: border-box;
}

.activity-sheet [hidden],
.ticket-dialog [hidden],
#activity-rule-dialog[hidden] {
  display: none !important;
}

.activity-sheet::backdrop,
.ticket-dialog::backdrop,
#activity-rule-dialog::backdrop {
  background: rgb(0 0 0 / 50%);
  backdrop-filter: none;
}

.activity-sheet {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #f8f8f8;
  color: #1a1a1a;
  overflow: hidden;
}

.activity-sheet[open] {
  display: flex;
  flex-direction: column;
}

.activity-sheet button,
.ticket-dialog button {
  cursor: pointer;
  font-family: inherit;
}

.activity-sheet button:disabled,
.ticket-dialog button:disabled {
  cursor: default;
  opacity: .5;
}

.activity-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: 48px;
  padding: 0 16px;
  background: white;
  border-bottom: 1px solid #f2f2f2;
}

.activity-sheet-header h2 {
  margin: 0;
  color: #1a1a1a;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.activity-prizes-breadcrumb-prefix {
  display: none;
}

.activity-prizes-back-label {
  display: none;
}

.activity-sheet-header mark {
  color: inherit;
  background: transparent;
}

.activity-sheet-header button {
  min-width: 32px;
  height: 40px;
  border: 0;
  padding: 0;
  background: none;
  font-size: 14px;
  color: #1a1a1a;
}

.activity-sheet-header button:first-child {
  font-size: 30px;
  text-align: left;
}

.activity-sheet-tabs {
  display: flex;
  flex: none;
  min-height: 40px;
  background: white;
  border-bottom: 1px solid #eee;
}

.activity-sheet-tabs button {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 10px 2px;
  border: 0;
  background: none;
  color: #777;
  font-size: 13px;
  white-space: nowrap;
}

.activity-sheet-tabs button[aria-pressed="true"] {
  color: #ff2685;
}

.activity-sheet-tabs button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 10px);
  width: 20px;
  height: 2px;
  background: #ff2685;
  border-radius: 2px;
}

.activity-sheet-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
}

.activity-sheet-body p[role="status"] {
  font-size: 14px;
  line-height: 22px;
  color: #777;
}

.activity-sheet-body p[role="status"]:empty {
  display: none;
}

.activity-sheet-body>button:not(.activity-panel-primary),
.activity-panel-more {
  padding: 9px 16px;
  border: 1px solid #ff2685;
  color: #ff2685;
  background: #fff;
  border-radius: 20px;
}

.activity-panel-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background: #ff2685;
  color: white !important;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
}

.activity-sheet-footer {
  flex: none;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid #eee;
  background: white;
  text-align: center;
}

.activity-sheet-footer>button:not(.activity-panel-primary) {
  padding: 12px 0 0;
  border: 0;
  background: none;
  color: #ff2685;
  font-size: 13px;
}

.activity-sheet-footer p {
  margin: 0 0 10px;
  font-size: 13px;
  color: #777;
}

.activity-sheet-empty {
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.activity-sheet-empty img {
  width: 170px;
  height: 120px;
  object-fit: contain;
}

.activity-sheet-empty strong {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.activity-sheet-empty p {
  color: #999;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
}

.activity-sheet-empty .activity-panel-primary {
  width: auto;
  margin-top: 8px;
  padding: 10px 30px;
  border-radius: 24px;
}

.activity-prizes-table-head {
  display: none;
}

.activity-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid #eee;
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  line-height: 20px;
}

.activity-order-row small,
.activity-order-row time {
  display: block;
  color: #999;
  font-size: 12px;
}

.activity-order-reward strong {
  display: block;
  color: #333;
  font-size: 15px;
}

.activity-order-reward small {
  margin-top: 4px;
}

.activity-order-identity {
  grid-row: 2;
  grid-column: 1/-1;
  overflow-wrap: anywhere;
  color: #777;
}

.activity-order-note {
  grid-row: 3;
  grid-column: 1/-1;
  color: #777;
}

.activity-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  font-size: 12px;
  color: #d97800;
}

.activity-status::before {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.activity-status--receiving {
  color: #d97800;
}

.activity-status--completed {
  color: #12b76a;
}

.activity-status--failed {
  color: #999;
}

.activity-order-logistics {
  grid-row: 4;
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #ff2685;
  font-size: 12px;
}

.activity-order-actions {
  grid-row: 4;
  grid-column: 2;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid #f3f3f3;
}

.activity-order-actions button {
  flex: none;
  border: 1px solid #ff2685;
  border-radius: 20px;
  background: none;
  padding: 5px 12px;
  font-size: 12px;
  color: #ff2685;
}

.activity-invite-sheet {
  inset: 50% auto auto 50%;
  width: min(300px, calc(100vw - 32px));
  height: max-content;
  max-height: calc(100dvh - 96px);
  min-height: 224px;
  margin: 0;
  border-radius: 8px;
  background: #fff;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.activity-invite-share {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 32px 24px 24px;
}

.activity-invite-share h2 {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(0 0 0 / 5%);
  color: rgb(0 0 0 / 90%);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
}

.activity-invite-share p {
  margin: 12px 0 0;
  color: rgb(0 0 0 / 55%);
  font-size: 14px;
  line-height: 24px;
  text-align: center;
}

.activity-invite-share input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.activity-invite-share [data-invite-code] {
  padding: 0;
  border: 0;
  background: none;
  color: #f81e7b;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.activity-invite-share .activity-panel-primary {
  min-height: 44px;
  margin-top: 24px;
  padding: 11px 24px;
  border-radius: 999px;
  background: #f81e7b;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.activity-invite-feedback {
  min-height: 0;
  margin: 4px 0 -8px !important;
  color: #d46b08 !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

.activity-invite-view {
  align-self: center;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(0 0 0 / 55%);
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
}

.activity-invite-close {
  position: absolute;
  left: 50%;
  top: calc(100% + 24px);
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
}

.activity-invite-close span::before,
.activity-invite-close span::after {
  position: absolute;
  top: 16px;
  left: 8px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  content: "";
  transform: rotate(45deg);
}

.activity-invite-close span::after {
  transform: rotate(-45deg);
}

.activity-invite-list-close {
  display: none;
}

.activity-invite-list-sheet {
  inset: auto 0 0;
  width: min(375px, 100vw);
  height: 592px;
  max-height: calc(100dvh - 44px);
  margin: 0 auto;
  padding: 18px 0 max(21px, env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: #fff;
  overflow: hidden;
}

.activity-invite-list-sheet.is-full {
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border-radius: 0;
}

.activity-invite-list-sheet.is-full .activity-invite-list-handle {
  display: none;
}

.activity-invite-list-sheet.is-full .activity-invite-list-header {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid rgb(0 0 0 / 5%);
}

.activity-invite-list-sheet.is-full .activity-invite-list-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

.activity-invite-list-sheet.is-full .activity-invite-list-header button {
  visibility: visible;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
}

.activity-invite-list-handle {
  flex: none;
  width: 36px;
  height: 5px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgb(0 0 0 / 20%);
}

.activity-invite-list-header {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  min-height: 24px;
  padding: 0 16px;
}

.activity-invite-list-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

.activity-invite-list-header button {
  visibility: hidden;
  padding: 0;
  border: 0;
  background: none;
  width: 24px;
  height: 24px;
  line-height: 0;
}

.activity-invite-list-header button img {
  display: block;
  width: 24px;
  height: 24px;
}

.activity-invite-list-sheet.is-full .activity-invite-list-header button {
  visibility: visible;
}

.activity-invite-list-header .activity-invite-list-copy {
  position: absolute;
  top: 50%;
  right: 16px;
  visibility: visible;
  width: auto;
  height: 28px;
  padding: 3px 10px;
  border: 1px solid #f21184;
  border-radius: 14px;
  background: rgb(242 17 132 / 8%);
  color: #f21184;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

.activity-invite-list-header .activity-invite-list-copy:disabled {
  border-color: rgb(242 17 132 / 28%);
  background: rgb(242 17 132 / 4%);
  color: rgb(242 17 132 / 38%);
  cursor: not-allowed;
}

.activity-invite-list-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px 0;
  overflow-y: auto;
}

.activity-invite-list-sheet:not(.is-full) .activity-invite-list-body {
  overflow: hidden;
}

.activity-invite-list-sheet.is-full .activity-invite-list-body {
  padding: 24px 16px max(21px, env(safe-area-inset-bottom));
}

.activity-invite-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
}

.activity-invite-stats h3 {
  margin: 0;
  color: rgb(0 0 0 / 90%);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.activity-invite-stats button {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(0 0 0 / 55%);
  font-size: 14px;
  line-height: 20px;
}

.activity-invite-stats button img {
  display: block;
  width: 18px;
  height: 18px;
}

.activity-invite-list-sheet.is-full .activity-invite-stats button {
  visibility: hidden;
}

.activity-invite-list-sheet [data-invite-recent] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-invite-list-sheet [data-invite-recent] > article {
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: 12px 0;
  border-bottom: 1px solid rgb(0 0 0 / 5%);
}

.activity-invite-list-sheet:not(.is-full) [data-invite-recent] > article:nth-child(n+7) {
  display: none;
}

.activity-invite-list-sheet [data-invite-recent] img {
  flex: none;
  width: 36px;
  height: 36px;
  margin-right: 12px;
  border-radius: 50%;
  object-fit: cover;
}

.activity-invite-person {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.activity-invite-person strong {
  overflow: hidden;
  color: rgb(0 0 0 / 90%);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-invite-person time {
  color: rgb(0 0 0 / 55%);
  font-size: 12px;
  line-height: 18px;
}

.activity-invite-reward {
  margin-left: 8px;
  color: #f21184;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.activity-invite-status {
  min-width: 52px;
  margin-left: 12px;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgb(18 178 98 / 10%);
  color: #12b262;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.activity-invite-status--pending {
  background: #fef1e2;
  color: #b86301;
}

.activity-invite-status--rejected {
  background: #f2f2f2;
  color: rgb(0 0 0 / 45%);
}

.activity-invite-list-sheet [data-invite-empty] {
  padding: 48px 0;
  color: rgb(0 0 0 / 35%);
  font-size: 14px;
  text-align: center;
}

#activity-rule-dialog {
  position: fixed;
  inset: 0;
  width: min(311px, calc(100vw - 32px));
  max-width: none;
  height: auto;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: white;
  color: #777;
  overflow: auto;
}

#activity-rule-dialog[open] {
  display: block;
}

#activity-rule-dialog .activity-dialog__backdrop {
  display: none;
}

#activity-rule-dialog .activity-dialog__panel {
  position: relative;
  width: 100%;
  max-height: none;
  padding: 32px 24px 24px;
  overflow: visible;
  border: 0;
  border-radius: 12px;
  background: white;
  box-shadow: none;
}

#activity-rule-dialog h2 {
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid #eee;
  color: #1a1a1a;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

#activity-rule-dialog h2:focus {
  outline: none;
}

#activity-rule-dialog ol {
  padding-left: 0;
  margin: 0;
  list-style-position: inside;
}

#activity-rule-dialog li {
  margin: 0;
  padding: 0;
  color: #777;
  font-size: 14px;
  line-height: 24px;
}

#activity-rule-dialog .activity-rule-figma-copy {
  color: #777;
  font-size: 14px;
  line-height: 24px;
}

#activity-rule-dialog .activity-rule-figma-copy ol {
  list-style: none;
}

#activity-rule-dialog .activity-panel-primary {
  margin-top: 24px;
  border-radius: 999px;
  background: #f81e7b;
  font-weight: 500;
  line-height: 22px;
}

@media (max-width: 768px) {
  body[data-activity-key="rebate"] #activity-rule-dialog::backdrop {
    background: rgb(0 0 0 / 70%);
  }
}

.daily-my-prizes {
  display: block;
  margin: 16px auto;
  padding: 10px 30px;
  border: 1px solid #ffe5cc;
  border-radius: 24px;
  color: #a93013;
  background: #fff5dc;
  font-size: 14px;
  cursor: pointer;
}

.ticket-invest-dialog {
  position: fixed;
  inset: 0;
  width: min(344px, calc(100vw - 16px));
  max-width: none;
  max-height: calc(100dvh - 16px);
  margin: auto;
  padding: 128px 22px 56px;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: #333;
  overflow: auto;
}

.ticket-dialog-gift {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 218px;
  height: 211px;
  object-fit: contain;
  pointer-events: none;
}

.ticket-dialog-glow {
  display: none;
}

.ticket-invest-surface {
  padding: 82px 24px 22px;
  border-radius: 24px;
  background: #fff;
  text-align: center;
}

.ticket-invest-dialog h3 {
  margin: 0 0 20px;
  color: #333;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
}

.ticket-invest-dialog h3 em {
  color: #ff2685;
  font-style: normal;
}

.ticket-quantity {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 12px;
}

.ticket-quantity button {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  background: #ffeff5;
  color: #ff2685;
  font-size: 20px;
}

.ticket-quantity button:first-child {
  border-radius: 6px 0 0 6px;
}

.ticket-quantity button[data-ticket-quantity="max"] {
  width: auto;
  margin-left: 8px;
  padding: 0 6px;
  background: none;
  font-size: 13px;
}

.ticket-quantity input {
  width: 64px;
  min-width: 0;
  flex: 1;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: #f8f8f8;
  color: #333;
  text-align: center;
  font-size: 16px;
  appearance: textfield;
}

.ticket-quantity input::-webkit-inner-spin-button {
  appearance: none;
}

.ticket-invest-target {
  margin: 12px 0 8px;
  color: #777;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ticket-invest-warning {
  margin: 0 0 16px;
  color: #999;
  font-size: 11px;
  line-height: 18px;
}

.ticket-invest-summary {
  margin: 12px 0 0;
  color: #999;
  font-size: 11px;
  line-height: 20px;
}

.ticket-invest-summary b {
  font-weight: 400;
  color: #ff2685;
}

.ticket-invest-dialog [role="alert"] {
  color: #d9255a;
  font-size: 12px;
  line-height: 18px;
}

.ticket-floating-close {
  position: absolute;
  bottom: 12px;
  left: calc(50% - 18px);
  width: 30px;
  height: 30px;
  border: 1px solid white;
  border-radius: 50%;
  background: transparent;
  color: white;
  font-size: 28px;
  line-height: 25px;
}

.ticket-history-row {
  position: relative;
  margin-bottom: 12px;
  padding: 16px;
  border-radius: 8px;
  background: white;
  color: #777;
  font-size: 13px;
}

.ticket-history-row-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #333;
  font-size: 14px;
}

.ticket-history-row-heading span {
  color: #ff2685;
  white-space: nowrap;
}

.ticket-history-row small {
  display: block;
  margin: 6px 0;
  color: #999;
  font-size: 12px;
}

.ticket-history-row p {
  margin: 12px 0;
}

.ticket-history-result {
  color: #ff2685;
}

.ticket-history-row button {
  display: block;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid #ff2685;
  border-radius: 20px;
  color: #ff2685;
  background: none;
}

.activity-list-note {
  text-align: center;
  color: #999;
  font-size: 12px;
}

.ticket-period-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 20px;
}

.ticket-period-picker>[data-results-period-open] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #111;
  font-size: 14px;
}

.ticket-period-picker>[data-results-period-open] strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-period-picker>[data-results-period-open]>span[aria-hidden="true"] {
  position: relative;
  display: block;
  flex: 0 0 8px;
  width: 8px;
  height: 14px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

.ticket-period-picker>[data-results-period-open]>span[aria-hidden="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.ticket-period-picker>[data-results-time] {
  margin-left: auto;
  color: rgb(0 0 0 / 35%);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.ticket-results-heading {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 36px;
  text-align: center;
}

.ticket-results-heading img {
  width: 225px;
  height: 32px;
  object-fit: contain;
}

.ticket-results-heading h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ticket-results-heading [data-results-summary] {
  margin: 0;
  color: rgb(0 0 0 / 35%);
  font-size: 12px;
  line-height: 18px;
}

.ticket-podium {
  display: grid;
  grid-template-columns: 90px 110px 90px;
  align-items: start;
  justify-content: center;
  gap: 12px;
  min-height: 184px;
  margin-top: 16px;
}

.ticket-podium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #111;
  text-align: center;
}

.ticket-podium-card.rank-1 {
  grid-column: 2;
  grid-row: 1;
}

.ticket-podium-card.rank-2 {
  grid-column: 1;
  grid-row: 1;
  margin-top: 8px;
}

.ticket-podium-card.rank-3 {
  grid-column: 3;
  grid-row: 1;
  margin-top: 8px;
}

.ticket-podium-portrait {
  position: relative;
  width: 90px;
  height: 90px;
}

.ticket-podium-card.rank-1 .ticket-podium-portrait {
  width: 110px;
  height: 110px;
}

.ticket-podium-avatar {
  position: absolute;
  inset: 20px 15px 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.ticket-podium-card.rank-1 .ticket-podium-avatar {
  inset: 24px 17px 9px;
  width: 76px;
  height: 76px;
}

.ticket-podium-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ticket-podium-copy {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.ticket-podium-copy strong,
.ticket-podium-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
}

.ticket-podium-copy strong {
  font-weight: 500;
}

.ticket-podium-copy b {
  color: #ff2685;
  font-weight: 400;
}

.ticket-podium-card small {
  color: rgb(0 0 0 / 55%);
  font-size: 12px;
  line-height: 18px;
}

.ticket-ranking-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 0;
  border-bottom: 1px solid rgb(0 0 0 / 5%);
  background: transparent;
}

.ticket-ranking-row strong {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f3f3f3;
  color: #999;
  font-size: 11px;
  font-weight: 400;
}

.ticket-ranking-row b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 108px;
  overflow: hidden;
  color: #ff2685;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-ranking-prize-unit {
  color: rgb(0 0 0 / 90%);
}

.ticket-ranking-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
}

.ticket-ranking-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.ticket-ranking-user>span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ticket-ranking-user>span>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-ranking-user small {
  color: rgb(0 0 0 / 55%);
  font-size: 12px;
}

.ticket-period-overlay {
  position: absolute;
  z-index: 12;
  inset: 0;
}

.ticket-period-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgb(0 0 0 / 70%);
}

.ticket-period-drawer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: min(420px, calc(100% - 80px));
  padding: 18px 16px max(18px, env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: #fff;
}

.ticket-period-handle {
  display: block;
  width: 36px;
  height: 5px;
  margin: 0 auto 18px;
  border-radius: 5px;
  background: rgb(0 0 0 / 55%);
}

.ticket-period-drawer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  margin-bottom: 12px;
}

.ticket-period-drawer h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.ticket-period-drawer header button {
  padding: 0;
  border: 0;
  background: none;
  color: rgb(0 0 0 / 35%);
  font-size: 12px;
}

.ticket-period-drawer header button em,
.ticket-period-drawer header button.is-forward {
  color: #ff2685;
  font-style: normal;
}

.ticket-period-drawer header button.is-forward em {
  color: rgb(0 0 0 / 35%);
}

.ticket-period-drawer header button i {
  margin: 0 4px;
  color: rgb(0 0 0 / 20%);
  font-style: normal;
}

.ticket-period-drawer [data-results-period-list] {
  height: calc(100% - 54px);
  overflow: auto;
}

.ticket-period-drawer [data-results-period-list] button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgb(0 0 0 / 5%);
  background: none;
  color: #111;
  font-size: 14px;
  text-align: left;
}

.ticket-period-drawer [data-results-period-list] button.is-current {
  color: #ff2685;
}

.ticket-period-drawer [data-results-period-list] button span {
  color: rgb(0 0 0 / 55%);
  font-size: 24px;
}

.ticket-results-sheet {
  --ticket-result-wash: #d6f6fe;
  background-color: #fff;
  background-image: url("/static/images/ticket-results/44891-229197.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 233px;
}

.ticket-results-sheet[data-results-theme="week"] {
  --ticket-result-wash: #ffc9f9;
  background-image: url("/static/images/ticket-results/44894-229970.png");
}

.ticket-results-sheet[data-results-theme="month"] {
  --ticket-result-wash: #ffe5a7;
  background-image: url("/static/images/ticket-results/44894-230192.png");
}

.ticket-results-sheet .activity-sheet-header {
  display: none;
}

.ticket-results-sheet .ticket-results-tabs {
  position: relative;
  z-index: 1;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: transparent;
}

.ticket-results-sheet .ticket-results-tabs button {
  flex: 1;
  min-width: 0;
  padding: 14px 2px 12px;
  color: rgb(0 0 0 / 55%);
  font-size: 14px;
}

.ticket-results-sheet .ticket-results-tabs button[aria-pressed="true"] {
  color: #111;
  font-weight: 500;
}

.ticket-results-sheet .ticket-results-tabs button[aria-pressed="true"]::after {
  bottom: 7px;
  left: calc(50% - 7px);
  width: 14px;
  height: 2px;
  background: #ff2685;
}

.ticket-results-sheet .ticket-results-tabs .ticket-results-back {
  flex: none;
  width: 24px;
  min-width: 24px;
  padding: 0;
  color: #111;
  font-size: 30px;
  line-height: 1;
  text-align: left;
}

.ticket-results-sheet .ticket-results-tabs .ticket-results-back::after {
  display: none;
}

.ticket-results-tabs>span {
  flex: none;
  width: 24px;
}

.ticket-results-sheet .ticket-results-body {
  position: relative;
  z-index: 1;
  padding: 12px 16px 0;
  background: transparent;
}

.ticket-results-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  color: rgb(0 0 0 / 55%);
  font-size: 14px;
  line-height: 22px;
  transform: translate(-50%, -50%);
}

.ticket-results-sheet .ticket-full-ranking {
  padding-bottom: 8px;
}

.ticket-results-footer {
  position: relative;
  z-index: 2;
  padding: 0 16px max(12px, env(safe-area-inset-bottom));
  border: 0;
  background: linear-gradient(var(--ticket-result-wash), #fff 70%);
}

.ticket-results-mine {
  display: grid;
  grid-template-columns: 22px 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 60px;
  text-align: left;
}

.ticket-results-mine>strong {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgb(0 0 0 / 4%);
  color: rgb(0 0 0 / 35%);
  font-size: 12px;
  font-weight: 400;
}

.ticket-results-mine img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.ticket-results-footer .ticket-results-mine p {
  margin: 0;
  overflow: hidden;
  color: #111;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-results-footer .activity-panel-primary {
  min-height: 36px;
  border-radius: 22px;
  background: linear-gradient(#ff69ad, #ff0780);
  box-shadow: inset 0 0 10px rgb(255 255 255 / 80%), 0 2px 8px rgb(255 18 132 / 25%);
  font-size: 14px;
}

.ticket-results-footer>[data-open-prizes] {
  padding-top: 10px !important;
}

.ticket-personal-result {
  width: min(300px, calc(100vw - 32px));
  padding: 0;
  margin: auto;
  border: 0;
  background: transparent;
  border-radius: 0;
  text-align: center;
  overflow: visible;
}

.ticket-personal-result__content {
  position: relative;
}

.ticket-personal-result__surface {
  padding: 16px 24px 24px;
  border-radius: 24px;
  background: white;
}

.ticket-personal-result .ticket-dialog-gift {
  position: relative;
  left: auto;
  transform: none;
  width: 180px;
  height: 160px;
  object-fit: contain;
}

.ticket-personal-result h3 {
  margin: 0 0 12px;
  color: #ff2685;
  font-size: 20px;
}

.ticket-personal-result h3 strong {
  color: #ff2685;
  font: inherit;
}

.ticket-personal-result__prize {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.ticket-personal-result p {
  white-space: pre-line;
  line-height: 24px;
  color: #777;
}

.ticket-personal-result[data-result="none"] .ticket-dialog-gift {
  opacity: .55;
}

.ticket-personal-result [data-ticket-result-list] {
  margin-top: 12px;
  border: 0;
  background: none;
  color: #ff2685;
  font-size: 13px;
}

.ticket-personal-result__close {
  display: none;
}

@media (min-width: 769px) {
  .ticket-personal-result {
    padding: 16px 24px 24px;
    background: #fff;
    border-radius: 24px;
  }

  .ticket-personal-result__content {
    position: static;
  }

  .ticket-personal-result__surface {
    display: contents;
  }

  .ticket-personal-result .ticket-dialog-gift {
    display: block;
    margin: 0 auto;
  }

  .ticket-personal-result__prize {
    display: none;
  }
}

@media (max-width: 768px) {
  .ticket-invest-dialog,
  .ticket-personal-result {
    width: min(344px, calc(100vw - 31px));
    height: 525px;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #1a1a1a;
    overflow: visible;
    transform: translateY(-28px);
  }

  .ticket-invest-dialog::backdrop,
  .ticket-personal-result::backdrop {
    background: rgb(0 0 0 / 70%);
  }

  .ticket-invest-dialog[open],
  .ticket-personal-result[open] {
    animation: ticket-dialog-enter .42s cubic-bezier(.22, 1, .36, 1) both;
  }

  .ticket-dialog-glow {
    position: absolute;
    z-index: 0;
    top: 38px;
    left: -71px;
    display: block;
    width: 484px;
    height: 478px;
    overflow: visible;
    pointer-events: none;
  }

  .ticket-dialog-glow img {
    display: block;
    width: 484px;
    height: 478px;
    max-width: none;
    object-fit: fill;
    animation: ticket-dialog-glow-spin 14s linear infinite;
    transform-origin: 50% 50%;
  }

  .ticket-invest-dialog .ticket-dialog-gift,
  .ticket-personal-result .ticket-dialog-gift {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 54px;
    width: 218px;
    height: 211px;
    max-width: none;
    object-fit: contain;
    transform: none;
    pointer-events: none;
  }

  .ticket-invest-surface,
  .ticket-personal-result__surface {
    position: absolute;
    z-index: 2;
    top: 129px;
    left: 21px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 336px;
    padding: 92px 24px 24px;
    border-radius: 24px;
    background: #fff;
    box-shadow: inset 0 3px 4px rgb(255 255 255 / 80%);
    text-align: center;
    overflow: hidden;
  }

  .ticket-invest-surface::before,
  .ticket-personal-result__surface::before {
    position: absolute;
    z-index: -1;
    top: -10px;
    left: 0;
    width: 100%;
    height: 95px;
    content: "";
    background: linear-gradient(180deg, #fd5995 0%, #fec7db 50%, rgb(255 255 255 / 0%) 100%);
    filter: blur(10px);
    pointer-events: none;
  }

  .ticket-invest-dialog h3 {
    margin: 0 0 12px;
    color: rgb(0 0 0 / 90%);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
  }

  .ticket-invest-dialog h3 em {
    color: #f21184;
  }

  .ticket-quantity {
    display: grid;
    grid-template-columns: 32px minmax(0, 128px) 32px 52px;
    align-items: center;
    gap: 0 0;
    width: 252px;
    height: 32px;
    margin: 0 0 12px;
  }

  .ticket-quantity button,
  .ticket-quantity input {
    height: 32px;
    border: 1px solid #fae0ea;
    background: #fff;
    color: #f21184;
  }

  .ticket-quantity button {
    width: 32px;
    padding: 0;
    background: #fdf5f8;
    font-size: 20px;
    line-height: 30px;
  }

  .ticket-quantity button:first-child {
    border-radius: 8px;
  }

  .ticket-quantity input {
    width: 100%;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    color: #f21184;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
  }

  .ticket-quantity input:focus-visible {
    position: relative;
    z-index: 1;
    outline: 0;
    box-shadow: inset 0 0 0 2px rgb(242 17 132 / 35%);
  }

  .ticket-quantity button:nth-of-type(2) {
    border-radius: 8px;
  }

  .ticket-quantity button[data-ticket-quantity="max"] {
    width: 52px;
    margin-left: 8px;
    padding: 0 8px;
    border: 1px solid #fae0ea;
    border-radius: 8px;
    background: #fdf5f8;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    word-break: keep-all;
  }

  .ticket-invest-target,
  .ticket-invest-warning {
    width: 252px;
    margin: 0;
    font-size: 12px;
    line-height: 18px;
  }

  .ticket-invest-target {
    color: rgb(0 0 0 / 55%);
  }

  .ticket-invest-warning {
    color: #ff0202;
  }

  .ticket-invest-dialog [role="alert"] {
    position: absolute;
    top: 202px;
    left: 24px;
    width: 252px;
    margin: 0;
    color: #d9255a;
    font-size: 12px;
    line-height: 18px;
  }

  .ticket-invest-surface > .activity-panel-primary,
  .ticket-personal-result__surface > .activity-panel-primary {
    flex: none;
    width: 252px;
    height: 44px;
    min-height: 44px;
    margin: auto 0 0;
    padding: 0 24px;
    border: 1px solid #fff;
    border-radius: 999px;
    background: linear-gradient(180deg, #e5005c 0%, #ff22ae 100%);
    box-shadow: inset 0 1px 18px #ffd9e8, inset 0 1px 4px #ffd9e8;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
  }

  .ticket-invest-summary {
    width: 252px;
    margin: 12px 0 0;
    color: rgb(0 0 0 / 55%);
    font-size: 14px;
    line-height: 20px;
  }

  .ticket-invest-summary b {
    color: #f21184;
  }

  .ticket-floating-close,
  .ticket-personal-result__close {
    position: absolute;
    z-index: 4;
    top: 489px;
    bottom: auto;
    left: 156px;
    display: block;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  .ticket-floating-close::before {
    display: none;
  }

  .ticket-floating-close img {
    display: block;
    width: 36px;
    height: 36px;
  }

  .ticket-invest-dialog .ticket-floating-close {
    background: url("/static/images/lucky-result-figma/close.svg") center / 36px 36px no-repeat;
  }

  .ticket-personal-result__content {
    position: absolute;
    inset: 0;
  }

  .ticket-personal-result__surface {
    height: 358px;
  }

  .ticket-personal-result h3 {
    width: 252px;
    min-height: 28px;
    margin: 0 0 12px;
    color: rgb(0 0 0 / 90%);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
  }

  .ticket-personal-result h3 strong {
    color: #f21184;
    font: inherit;
  }

  .ticket-personal-result__prize {
    display: block;
    flex: none;
    width: 100px;
    height: 100px;
    object-fit: contain;
  }

  .ticket-personal-result p {
    margin: 10px 0 0;
    color: rgb(0 0 0 / 55%);
    font-size: 12px;
    line-height: 18px;
    white-space: pre-line;
  }

  .ticket-personal-result[data-result="winner"] [data-ticket-result-detail],
  .ticket-personal-result[data-result="sunshine"] [data-ticket-result-detail] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ticket-personal-result[data-result="none"] .ticket-personal-result__prize {
    display: none;
  }

  .ticket-personal-result[data-result="none"] .ticket-personal-result__surface > .activity-panel-primary {
    margin-top: auto;
  }

  .ticket-personal-result [data-ticket-result-list] {
    flex: none;
    height: 20px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(0 0 0 / 35%);
    font-size: 14px;
    line-height: 20px;
  }

  .ticket-personal-result__close {
    top: 511px;
  }

  .ticket-personal-result.is-reward-exiting {
    pointer-events: none;
  }
}

@keyframes ticket-dialog-enter {
  from { opacity: 0; transform: translate3d(0, -14px, 0) scale(.86); }
  62% { opacity: 1; transform: translate3d(0, -31px, 0) scale(1.025); }
  to { opacity: 1; transform: translate3d(0, -28px, 0) scale(1); }
}

@keyframes ticket-dialog-glow-spin {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.035); }
  to { transform: rotate(360deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ticket-invest-dialog[open],
  .ticket-personal-result[open],
  .ticket-dialog-glow img {
    animation: none !important;
  }

  .ticket-result-reward-dot {
    display: none !important;
  }
}

.ticket-sources-sheet {
  inset: auto 0 auto;
  top: max(
    var(--ticket-sources-viewport-top, 0px),
    calc(
      var(--ticket-sources-viewport-top, 0px) +
      var(--ticket-sources-viewport-height, 100dvh) -
      317px - env(safe-area-inset-bottom)
    )
  );
  width: min(375px, 100vw);
  height: calc(317px + env(safe-area-inset-bottom));
  min-height: 0;
  max-height: 100dvh;
  margin: 0 auto;
  padding: 18px 16px 0;
  border-radius: 20px 20px 0 0;
  background: #fff;
  color: #1a1a1a;
  overflow: hidden;
}

.ticket-sources-sheet::backdrop {
  background: rgb(0 0 0 / 70%);
}

.ticket-sources-sheet[open] {
  display: flex;
}

.ticket-sources__glow {
  position: absolute;
  top: -242px;
  left: calc(50% + 5px);
  width: 643px;
  height: 367px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.ticket-sources__handle {
  position: relative;
  z-index: 1;
  flex: none;
  width: 36px;
  height: 5px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgb(0 0 0 / 20%);
}

.ticket-sources__header {
  position: relative;
  z-index: 1;
  flex: none;
  margin: 0 0 18px;
  padding: 0;
  text-align: center;
}

.ticket-sources__header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.ticket-sources-sheet .ticket-sources__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  padding: 0 0 calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ticket-sources-sheet .ticket-sources__body>button {
  display: block;
  margin: 8px auto;
}

.ticket-sources__list {
  display: grid;
  gap: 12px;
}

.ticket-source {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 64px;
  padding: 12px;
  background: #fff;
  border: 0;
  border-radius: 0;
}

.ticket-source__icon {
  width: 40px;
  height: 40px;
  object-fit: fill;
}

.ticket-source__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.ticket-source__copy strong {
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.ticket-source__copy small,
.ticket-source__copy .ticket-source__reward {
  color: rgb(0 0 0 / 40%);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.ticket-source .ticket-source__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #e5005c, #ff22ae);
  box-shadow: inset 0 1px 4px 2px #ffd9e8;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
}

.ticket-source.is-completed .ticket-source__action {
  opacity: .3;
  pointer-events: none;
}

.ticket-sources-sheet .ticket-source.is-completed {
  opacity: 1;
  filter: none;
}

.ticket-source.is-unavailable .ticket-source__action {
  opacity: .3;
  pointer-events: none;
}

.ticket-sources__footer,
.ticket-sources__close {
  display: none;
}

.ticket-desktop-rail {
  display: none;
}

[data-ticket-refresh] {
  border: 0;
  background: none;
  color: #a43c14;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

@media(max-width:768px) {
  .lucky-actions {
    width: min(375px, 100vw);
    grid-template-columns: minmax(0, 82fr) minmax(0, 190fr) minmax(0, 82fr);
    gap: 8px;
    padding: 0 4px;
  }

  .lucky-actions .lucky-side-action,
  .lucky-actions .lucky-primary-action {
    width: 100%;
    min-width: 0;
  }

  .lucky-actions .lucky-primary-action strong {
    font-size: 15px;
    line-height: 20px;
  }

  .ticket-actions {
    gap: 10px;
    margin-left: 8px;
    margin-right: 8px;
  }

  .ticket-actions>button:not(.ticket-actions__invest) {
    width: 68px;
  }

  .ticket-actions>button:not(.ticket-actions__invest)>span {
    left: 0;
    right: 0;
  }

  .ticket-actions>button>img {
    left: 8px;
  }

  .ticket-actions__invest strong {
    font-size: 20px;
  }
}

@media(min-width:769px) {
  .activity-sheet {
    inset: 0;
    width: min(1200px, calc(100vw - 64px));
    height: min(780px, calc(100dvh - 64px));
    max-height: calc(100dvh - 64px);
    margin: auto;
    border-radius: 12px;
  }

  .activity-sheet-header {
    height: 64px;
    padding: 0 32px;
  }

  .activity-sheet-header h2 {
    font-size: 22px;
  }

  .activity-sheet-tabs {
    padding: 0 32px;
  }

  .activity-sheet-tabs button {
    flex: none;
    min-width: 130px;
    font-size: 14px;
  }

  .activity-sheet-body {
    padding: 24px 32px;
  }

  .activity-sheet-footer {
    padding: 16px 32px 20px;
  }

  .activity-sheet-footer .activity-panel-primary {
    max-width: 300px;
    margin: auto;
  }

  .activity-prizes-sheet {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 28px max(32px, calc((100vw - 1600px) / 2)) 30px;
    border-radius: 0;
    background:
      radial-gradient(circle at 94% 28%, rgb(255 214 161 / 80%), transparent 26%),
      radial-gradient(circle at 14% 26%, rgb(255 125 194 / 78%), transparent 34%),
      linear-gradient(165deg, #ff0a82 0 39%, #ffe9f3 62%, #fff 100%);
  }

  .activity-prizes-sheet::backdrop {
    background: transparent;
    backdrop-filter: none;
  }

  .activity-prizes-sheet .activity-sheet-header {
    justify-content: flex-start;
    gap: 14px;
    width: min(1600px, 100%);
    height: 46px;
    margin: 0 auto 37px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .activity-prizes-sheet .activity-sheet-header button:first-child {
    display: inline-flex;
    width: auto;
    min-width: 0;
    height: 32px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 0;
    color: #fff;
    font-size: 20px;
    line-height: 28px;
  }

  .activity-prizes-sheet .activity-prizes-back-icon {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 24px;
    line-height: 20px;
  }

  .activity-prizes-sheet .activity-prizes-back-label {
    display: inline;
    font-weight: 600;
  }

  .activity-prizes-sheet .activity-sheet-header h2 {
    display: none;
  }

  .activity-prizes-sheet .activity-prizes-breadcrumb-prefix {
    display: inline;
  }

  .activity-prizes-sheet .activity-sheet-header h2 mark {
    padding: 0;
    color: inherit;
    background: transparent;
    font-weight: inherit;
  }

  .activity-prizes-sheet .activity-sheet-header [data-open-activity-rule] {
    display: none;
  }

  .activity-prizes-sheet .activity-sheet-tabs,
  .activity-prizes-sheet .activity-sheet-body {
    width: min(1600px, 100%);
    margin-right: auto;
    margin-left: auto;
    background: #fff;
  }

  .activity-prizes-sheet .activity-sheet-tabs {
    min-height: 106px;
    padding: 22px 24px 16px;
    border: 22px solid #fff;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -2px 12px rgb(20 20 20 / 6%);
  }

  .activity-prizes-sheet .activity-sheet-tabs button {
    min-width: 165px;
    color: #777;
    font-size: 18px;
  }

  .activity-prizes-sheet .activity-sheet-tabs button[aria-pressed="true"] {
    color: #222;
    font-weight: 600;
  }

  .activity-prizes-sheet .activity-sheet-tabs button[aria-pressed="true"]::after {
    bottom: 0;
    width: 24px;
    height: 3px;
    background: #ff2685;
  }

  .activity-prizes-sheet .activity-sheet-body {
    flex: 1 1 auto;
    max-height: none;
    padding: 0 22px 22px;
    border: 22px solid #fff;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 8px 12px rgb(20 20 20 / 6%);
  }

  .activity-prizes-sheet [data-prizes-feedback] {
    display: none;
  }

  .activity-prizes-table-head,
  .activity-order-row {
    display: grid;
    grid-template-columns: 1.15fr 1.2fr 1.4fr .9fr 1.2fr .7fr;
    gap: 24px;
    align-items: center;
    text-align: center;
  }

  .activity-prizes-table-head {
    padding: 10px 16px;
    border-radius: 0;
    background: #fffaf2;
    color: #222;
    font-size: 14px;
    font-weight: 600;
  }

  .activity-order-row {
    margin: 0;
    min-height: 70px;
    padding: 14px 16px;
    border-radius: 0;
    border-bottom: 1px solid #eee;
  }

  .activity-order-row>* {
    grid-column: auto;
    grid-row: auto;
  }

  .activity-order-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
  }

  .activity-prizes-sheet .activity-status {
    align-self: center;
    justify-self: stretch;
    justify-content: center;
  }

  .activity-order-actions button {
    min-width: 86px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #ff7182, #ff4b55);
    font-size: 14px;
  }

  .activity-order-reward strong {
    font-size: 15px;
    font-weight: 600;
  }

  .activity-order-identity time {
    margin-top: 4px;
  }

  .activity-order-note {
    color: #999;
    text-align: center;
  }

  .activity-status {
    font-size: 15px;
  }

  .activity-order-logistics {
    color: #ff2685;
    font-size: 14px;
  }

  .activity-invite-sheet {
    inset: 50% auto auto 50%;
    width: 300px;
    height: max-content;
    max-height: calc(100dvh - 96px);
    margin: 0;
    border-radius: 8px;
    transform: translate(-50%, -50%);
  }

  .activity-invite-list-sheet {
    inset: 0;
    width: 440px;
    height: 576px;
    margin: auto;
    border-radius: 12px;
    overflow: visible;
  }

  .activity-invite-list-handle {
    display: none;
  }

  .activity-invite-list-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    min-height: 72px;
    padding: 0 24px;
    border-bottom: 1px solid rgb(0 0 0 / 5%);
  }

  .activity-invite-list-header h2 {
    margin: 0;
    color: rgb(0 0 0 / 90%);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
  }

  .activity-invite-list-header button {
    visibility: visible;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(0 0 0 / 90%);
    font-size: 28px;
    line-height: 32px;
  }

  .activity-invite-list-header [data-invite-list-back],
  .activity-invite-stats [data-invite-list-all] {
    display: none;
  }

  .activity-invite-list-close {
    display: block;
  }

  .activity-invite-list-header .activity-invite-list-copy {
    right: 24px;
    height: 28px;
    padding: 3px 10px;
    border: 1px solid #f21184;
    border-radius: 14px;
    color: #f21184;
    font-size: 13px;
    line-height: 20px;
  }

  .activity-invite-list-body {
    padding: 18px 24px 24px;
  }

  .ticket-history-row {
    padding: 20px 24px;
  }

  .ticket-sources-sheet {
    inset: 0;
    width: 440px;
    min-height: 0;
    height: 324px;
    transform: translateY(-30px);
    max-height: min(324px, calc(100dvh - 100px));
    margin: auto;
    padding: 0;
    border-radius: 12px;
    overflow: visible;
  }

  .ticket-sources__glow {
    display: none;
  }

  .ticket-sources__handle {
    display: none;
  }

  .ticket-sources__header {
    margin-bottom: 6px;
    padding: 32px 24px 12px;
    text-align: center;
  }

  .ticket-sources__header h2 {
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
  }

  .ticket-sources-sheet .ticket-sources__body {
    padding: 0 24px 24px;
    outline: 0;
    overflow-y: hidden;
    overscroll-behavior: auto;
    scrollbar-width: none;
  }

  .ticket-sources-sheet .ticket-sources__body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .ticket-sources__list {
    gap: 12px;
  }

  .ticket-source {
    height: 64px;
    min-height: 64px;
    padding: 11px 12px;
  }

  .ticket-source__copy strong {
    font-size: 16px;
    line-height: 22px;
  }

  .ticket-source__copy small,
  .ticket-source__copy .ticket-source__reward {
    font-size: 14px;
    line-height: 20px;
  }

  .ticket-source .ticket-source__action {
    min-width: 66px;
    font-size: 14px;
    line-height: 20px;
  }

  .ticket-sources__footer { display: none; }

  .ticket-sources__close {
    position: absolute;
    left: 50%;
    bottom: -59px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    transform: translateX(-50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
  }

  .ticket-sources__close span,
  .ticket-sources__close span::after {
    position: absolute;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    content: "";
    transform: rotate(45deg);
  }

  .ticket-sources__close span::after {
    inset: 0;
    transform: rotate(90deg);
  }

  body[data-activity-key="ticket"]>.lucky-site-header {
    display: block;
  }

  body[data-activity-key="ticket"] .lucky-site-footer {
    display: block;
  }

  .ticket-experience {
    position: relative;
  }

  .ticket-desktop-rail {
    display: flex;
    flex-direction: column;
    gap: 54.2px;
    position: absolute;
    right: 0;
    top: 192px;
  }

  .ticket-desktop-rail button {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    padding: 6.4px 7.2px;
    border: .96px solid #ffd774;
    border-right: 0;
    border-radius: 12.8px 0 0 12.8px;
    background: #f81e7b;
    box-shadow: inset 6.4px 0 6.4px rgb(255 255 255 / 50%);
    color: #fff;
    font-family: "PingFang SC", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
  }

  .ticket-desktop-rail button:first-child {
    height: 108.8px;
  }

  .ticket-desktop-rail button:last-child {
    height: 156.8px;
  }

  .ticket-desktop-rail button>span {
    width: 17.6px;
    word-break: break-all;
  }
}

.activity-sheet-empty img {
  width: 122px;
  height: 68px;
  margin-bottom: 12px;
}

.activity-ecard-claims {
  margin-top: 12px;
}

/* Keep the rule confirmation reachable while its long body scrolls. */
#activity-rule-dialog {
  height: min(512px, calc(100dvh - 32px));
  overflow: hidden;
}

#activity-rule-dialog .activity-dialog__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#activity-rule-dialog h2,
#activity-rule-dialog .activity-panel-primary {
  flex: none;
}

.activity-rule-scroll-shell {
  position: relative;
  flex: 1;
  min-height: 0;
}

#activity-rule-dialog [data-activity-rule-content] {
  height: 100%;
  padding-right: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#activity-rule-dialog [data-activity-rule-content]::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.activity-rule-scrollbar {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  border-radius: 999px;
  background: rgb(0 0 0 / 6%);
  pointer-events: none;
}

.activity-rule-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #b8b8b8;
  transform: translateY(0);
  will-change: height, transform;
}

#activity-rule-dialog .activity-rule-external-close {
  display: none;
}

/* Lucky and rebate rules share the PC layout and separate close control. */
@media (min-width: 769px) {
  body[data-activity-key="ticket"] #activity-rule-dialog {
    width: 392px;
  }

  body:is([data-activity-key="lucky"], [data-activity-key="rebate"]) #activity-rule-dialog {
    width: 440px;
    height: min(496px, calc(100dvh - 32px));
    background: transparent;
    border-radius: 0;
  }

  body:is([data-activity-key="lucky"], [data-activity-key="rebate"]) #activity-rule-dialog[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  body:is([data-activity-key="lucky"], [data-activity-key="rebate"]) #activity-rule-dialog::backdrop {
    background: rgb(0 0 0 / 70%);
    backdrop-filter: blur(12px);
  }

  body:is([data-activity-key="lucky"], [data-activity-key="rebate"]) #activity-rule-dialog .activity-dialog__panel {
    flex: 1;
    height: auto;
  }

  body:is([data-activity-key="lucky"], [data-activity-key="rebate"]) #activity-rule-dialog li,
  body:is([data-activity-key="lucky"], [data-activity-key="rebate"]) #activity-rule-dialog .activity-rule-figma-copy {
    line-height: 20px;
  }

  body:is([data-activity-key="lucky"], [data-activity-key="rebate"]) #activity-rule-dialog .activity-rule-external-close {
    display: block;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: white;
    cursor: pointer;
  }

  body[data-activity-key="lucky"] #activity-rule-dialog .activity-rule-scrollbar {
    display: none;
  }

  #activity-rule-dialog .activity-rule-external-close svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
}

body:has(dialog.activity-sheet[open]),
body:has(dialog.ticket-dialog[open]) {
  overflow: hidden;
}

@media(min-width:1024px) {
  .ticket-header>[data-open-activity-rule] {
    display: none;
  }

  .ticket-announcement {
    position: absolute;
    left: 0;
    top: 593px;
    width: 201px;
    height: 204px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .ticket-announcement>header {
    display: none;
  }

  .ticket-announcement .winner-scroll-window {
    max-height: 204px;
  }

  .ticket-announcement [data-ticket-results] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .ticket-announcement .ticket-pool__record {
    display: flex;
    flex: none;
    align-items: center;
    box-sizing: border-box;
    width: max-content;
    max-width: 201px;
    height: 28px;
    min-height: 28px;
    gap: 0;
    margin: 0;
    padding: 4px 10px 4px 8px;
    overflow: hidden;
    border: 0;
    border-radius: 100px;
    background: rgb(0 0 0 / 30%);
    backdrop-filter: blur(2px);
    color: white;
    font-family: "PingFang SC", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
  }

  .ticket-announcement .ticket-pool__rank {
    display: none;
  }

  .ticket-announcement .ticket-pool__avatar {
    display: none;
  }

  .ticket-announcement .ticket-pool__record>span:first-of-type {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ticket-announcement .ticket-pool__record>span:first-of-type::before {
    content: "用户";
  }

  .ticket-announcement .ticket-pool__record>span:first-of-type::after {
    content: "抽到";
  }

  .ticket-announcement .ticket-pool__prize-value,
  .ticket-announcement .ticket-pool__prize-value b,
  .ticket-announcement .ticket-pool__prize-value small {
    flex: none;
    margin-left: 0;
    color: white;
    font: inherit;
  }

  .ticket-announcement [data-ticket-results-empty] {
    width: max-content;
    margin: 0;
    padding: 4px 10px 4px 8px;
    border-radius: 100px;
    background: rgb(0 0 0 / 30%);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
  }
}

@media(min-width:769px) {
  .ticket-results-sheet {
    width: 440px;
    height: min(774px, calc(100dvh - 126px));
    max-height: calc(100dvh - 126px);
    overflow: visible;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgb(10 35 55 / 32%);
  }

  .ticket-results-sheet::backdrop {
    background: rgb(9 31 47 / 70%);
    backdrop-filter: blur(8px);
  }

  .ticket-results-sheet .ticket-results-tabs {
    position: static;
    min-height: 84px;
    padding: 20px 24px 0;
    background-image: linear-gradient(rgb(0 0 0 / 5%), rgb(0 0 0 / 5%));
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: calc(100% - 48px) 1px;
  }

  .ticket-results-sheet .ticket-results-tabs button {
    padding-top: 14px;
    font-size: 15px;
  }

  .ticket-results-sheet .ticket-results-tabs .ticket-results-back {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    color: transparent;
    transform: translateX(-50%);
  }

  .ticket-results-sheet .ticket-results-tabs .ticket-results-back::before {
    content: "×";
    color: #fff;
    font-size: 28px;
    font-weight: 200;
    line-height: 1;
  }

  .ticket-results-sheet .ticket-results-body {
    padding: 10px 24px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .ticket-results-sheet .ticket-results-body::-webkit-scrollbar {
    display: none;
  }

  .ticket-results-heading {
    margin-top: 24px;
  }

  .ticket-results-heading [data-results-summary] {
    font-size: 14px;
    line-height: 20px;
  }

  .ticket-results-sheet .ticket-podium {
    grid-template-columns: 113px 134px 113px;
    gap: 16px;
    margin-top: 18px;
  }

  .ticket-results-sheet .ticket-podium-copy strong {
    font-size: 16px;
    line-height: 22px;
  }

  .ticket-results-sheet .ticket-podium-card.rank-1 .ticket-podium-copy b {
    font-size: 16px;
    line-height: 22px;
  }

  .ticket-results-sheet .ticket-podium-card small,
  .ticket-results-sheet .ticket-ranking-user,
  .ticket-results-sheet .ticket-ranking-user small,
  .ticket-results-sheet .ticket-ranking-row b {
    font-size: 14px;
    line-height: 20px;
  }

  .ticket-results-sheet .ticket-full-ranking {
    max-height: 250px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(0 0 0 / 12%) transparent;
  }

  .ticket-results-sheet .ticket-results-footer {
    border-radius: 0 0 12px 12px;
    padding: 0 32px 20px;
  }

  .ticket-results-sheet .ticket-results-footer .activity-panel-primary {
    max-width: 260px;
  }

  .ticket-results-sheet .ticket-results-footer>[data-open-prizes] {
    display: none;
  }

  .ticket-results-sheet .ticket-period-overlay {
    overflow: hidden;
    border-radius: 12px;
  }

  .ticket-results-sheet .ticket-period-drawer {
    border-radius: 20px 20px 12px 12px;
  }
}

/* PC 45339:26127: centered 440 x 584 investment-history card. */
@media (min-width: 769px) {
  .activity-sheet.ticket-history-dialog {
    inset: 0;
    width: 440px;
    height: min(584px, calc(100dvh - 100px));
    max-height: min(584px, calc(100dvh - 100px));
    margin: auto;
    padding: 24px;
    transform: translateY(-30px);
    border-radius: 12px;
    background: #fff;
    overflow: visible;
    outline: 0;
  }

  .ticket-history-dialog .activity-sheet-header {
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 0;
    border: 0;
  }

  .ticket-history-dialog .activity-sheet-header h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
  }

  .ticket-history-dialog .activity-sheet-tabs {
    min-height: 50px;
    padding: 0;
    gap: 40px;
  }

  .ticket-history-dialog .activity-sheet-tabs button {
    flex: none;
    min-width: 0;
    padding: 9px 0 19px;
    font-size: 16px;
    line-height: 22px;
  }

  .ticket-history-dialog .activity-sheet-tabs button[aria-pressed="true"] {
    color: #222;
  }

  .ticket-history-dialog .activity-sheet-tabs button::after {
    bottom: 12px;
    width: 16px;
    height: 3px;
  }

  .ticket-history-dialog .activity-sheet-tabs button:focus {
    outline: 0;
  }

  .ticket-history-dialog .activity-sheet-tabs button:focus-visible {
    background: transparent;
    box-shadow: none;
  }

  .ticket-history-dialog .activity-sheet-tabs button:focus-visible:not([aria-pressed="true"]) {
    border-radius: 4px;
    background: rgb(255 22 128 / 4%);
    box-shadow: inset 0 0 0 1px rgb(255 22 128 / 35%);
  }

  .ticket-history-dialog .activity-sheet-body {
    padding: 16px 0 0;
    outline: 0;
    scrollbar-width: none;
  }

  .ticket-history-dialog .activity-sheet-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .ticket-history-dialog .ticket-history-row {
    margin: 0;
    padding: 20px 0 14px;
    border-bottom: 1px solid #eee;
    border-radius: 0;
  }

  .ticket-history-dialog .ticket-history-row-heading {
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 22px;
  }

  .ticket-history-dialog .ticket-history-row-heading strong {
    font-weight: 500;
  }

  .ticket-history-dialog .ticket-history-row small {
    margin: 6px 0 0;
    color: #888;
    font-size: 14px;
    line-height: 20px;
  }

  .ticket-history-dialog .ticket-history-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 2px 8px;
    border: 0;
    border-radius: 14px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }

  .ticket-history-dialog .ticket-history-badge--pending { color: #ce7900; background: #fff2e0; }
  .ticket-history-dialog .ticket-history-badge--won { color: #00bf65; background: #e4f8ed; }
  .ticket-history-dialog .ticket-history-badge--none { color: #777; background: #e7e7e7; }
  .ticket-history-dialog .ticket-history-badge span { color: inherit; }

  .ticket-history-dialog .activity-sheet-footer {
    padding: 24px 0 0;
    border: 0;
    background: #fff;
  }

  .ticket-history-dialog .activity-sheet-footer .activity-panel-primary {
    width: 100%;
    max-width: none;
    height: 44px;
    min-height: 44px;
    border-radius: 22px;
    background: #ff1680;
    font-size: 16px;
  }

  .ticket-history-dialog .ticket-history-close {
    position: absolute;
    top: calc(100% + 27px);
    left: calc(50% - 16px);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 25px;
    line-height: 27px;
  }
}

.ticket-results-mine { grid-template-columns: 22px 40px minmax(0, 1fr) auto; }
.ticket-results-mine-copy { min-width: 0; }
.ticket-results-mine-copy small { display: block; margin-top: 4px; color: #777; font-size: 12px; }
[data-results-mine-prize] { white-space: nowrap; font-size: 14px; }
[data-results-mine-prize] .ticket-ranking-prize { font-size: inherit; }
.ticket-results-footer { border-radius: 20px 20px 0 0; box-shadow: 0 -2px 6px rgb(255 255 255 / 75%); }