/* Scoped production hotfix: fit transfer receipt values without changing theme assets. */
html body > .transfer-success-backdrop .transfer-success-certificate {
  container-type: inline-size;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body > .transfer-success-backdrop .transfer-success-amount {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 4px !important;
  overflow: hidden !important;
}

html body > .transfer-success-backdrop .transfer-success-amount strong {
  min-width: 0 !important;
  max-width: calc(100% - 48px) !important;
  font-size: var(--receipt-fitted-font-size, clamp(27px, 11cqi, 48px)) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  font-variant-numeric: tabular-nums;
}

html body > .transfer-success-backdrop .transfer-success-amount span {
  flex: 0 0 auto !important;
  font-size: clamp(14px, 5cqi, 18px) !important;
  line-height: 1.2 !important;
}

html body > .transfer-success-backdrop .transfer-success-details,
html body > .transfer-success-backdrop .transfer-success-details > div {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body > .transfer-success-backdrop .transfer-success-details > div {
  grid-template-columns: minmax(76px, 29%) minmax(0, 1fr) !important;
  column-gap: 8px !important;
}

html body > .transfer-success-backdrop .transfer-success-details dt,
html body > .transfer-success-backdrop .transfer-success-details dd {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body > .transfer-success-backdrop .transfer-success-details dd {
  width: 100% !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
  white-space: normal !important;
}

html body > .transfer-success-backdrop .transfer-success-reference-row dd > span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

html body .transfer-history-receipt-v9 .transfer-success-reference-row .transfer-receipt-reference-short-v1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  overflow: hidden !important;
}

html body .transfer-history-receipt-v9 .transfer-success-reference-row .transfer-receipt-reference-short-v1 .copy-mark {
  flex: 0 0 23px !important;
  order: 0 !important;
  align-self: center !important;
}

html body .transfer-history-receipt-v9 .transfer-success-reference-row .transfer-receipt-reference-short-v1 .reference-value {
  flex: 0 1 auto !important;
  order: 1 !important;
  width: auto !important;
  max-width: calc(100% - 29px) !important;
  display: grid !important;
  justify-items: end !important;
}

html body .transfer-history-receipt-v9 .transfer-success-done {
  margin: -12px 0 calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Keep the confirmed recipient nickname complete on narrow phones. */
html body #root .app-shell.player-shell .transfer-confirm-body .transfer-confirm-route article:last-child b {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
  text-overflow: clip !important;
  font-size: clamp(11px, 3.1vw, 14px) !important;
  line-height: 16px !important;
}

@media (max-width: 360px) {
  html body > .transfer-success-backdrop .transfer-success-certificate {
    padding-inline: 15px !important;
  }

  html body > .transfer-success-backdrop .transfer-success-details > div {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }
}