/* Keep full amounts visible. Do not clip them.
   The phone column is at most 430px, so two huge figures cannot sit
   side by side. Stack those grids, let numbers wrap, and start the
   page below the brand row plus the Telegram safe area. */

[class*="max-w-[430px]"] {
  container-type: inline-size;
  container-name: emily;
}

[class*="max-w-[430px]"] > header {
  padding-bottom: 0.35rem;
  background: linear-gradient(to bottom, rgba(3, 17, 12, 0.94) 70%, rgba(3, 17, 12, 0));
}

main.overflow-y-auto {
  padding-top: calc(env(safe-area-inset-top, 0px) + 4.85rem) !important;
}

main .gold-panel,
main .bullion,
main section,
main article,
main .grid {
  min-width: 0;
  max-width: 100%;
}

main p,
main h1,
main h2,
main h3,
main .num,
main .tabular-nums {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.08;
}

@container emily (max-width: 520px) {
  main .grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  main .text-5xl,
  main .text-7xl,
  main [class*="text-[52px]"] {
    font-size: clamp(1.35rem, 8cqi, 2.6rem) !important;
    line-height: 1.05 !important;
  }

  main h1[class*="text-[40px]"],
  main h1[class*="text-[34px]"] {
    font-size: clamp(1.7rem, 11cqi, 2.5rem) !important;
    line-height: 1.05 !important;
  }

  main input[class*="text-4xl"] {
    font-size: clamp(1.15rem, 7cqi, 2rem) !important;
    min-width: 0;
    max-width: 100%;
  }
}

#emily-ton-slot,
#emily-ton-slot * {
  min-width: 0;
  max-width: 100%;
}

[data-tc-wallets-modal-container="true"],
[data-tc-modal="true"] {
  z-index: 10050 !important;
}