/**
 * Global mobile layout fixes for all TIREKS landings.
 * Overrides MAX auth base.css body { display:flex; min-width:320px } on phones.
 */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

@media (max-width: 767px) {
  /* MAX auth base forces flex centering — breaks landing width on phones */
  body {
    display: block !important;
    place-items: unset !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Auth shells */
  .container.svelte-12qhfyh,
  .container.svelte-vywflk {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    display: block !important;
  }

  .container.svelte-vywflk {
    display: block !important;
  }

  .background.svelte-vywflk,
  .background.svelte-4de505,
  .layer.layer-base.svelte-1afbb1c {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .auth.auth--regular.svelte-vywflk,
  .auth.auth--phone.auth--regular.svelte-vywflk {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .auth--regular.svelte-vywflk .footer.svelte-vywflk {
    border-top: none !important;
  }

  .auth--regular.svelte-vywflk .form.svelte-vywflk {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }

  .auth--regular.svelte-vywflk .header.svelte-vywflk {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .auth--regular.svelte-vywflk .footer.svelte-vywflk {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  /* Landing page shells — width only, padding stays in theme CSS */
  .rbxc-page,
  .tg-page,
  .cu-page,
  .tiktok-page,
  .chatgpt-page,
  .dating-page,
  .exile-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .rbxc-case-app,
  .tg-case-app,
  .cu-main,
  .tiktok-app,
  .chatgpt-main,
  .exile-app {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Auth overlays fullscreen */
  .rbxc-auth-section,
  .tg-auth-section,
  .cu-auth,
  .tiktok-auth,
  .chatgpt-auth-panel,
  .dating-auth-panel,
  .exile-auth-panel {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }

  /* Roulette / horizontal feeds */
  .rbxc-roulette-wrap,
  .tg-roulette-wrap,
  .rbxc-drops,
  .tg-drops,
  .rbxc-reviews-track,
  .tg-reviews-track,
  .chatgpt-reviews-track,
  .cu-grid {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Buttons */
  .rbxc-open-btn,
  .rbxc-claim-btn,
  .rbxc-retry-btn,
  .tg-open-btn,
  .tg-claim-btn,
  .tg-retry-btn,
  .cu-cta,
  .tiktok-cta,
  .chatgpt-cta-btn,
  .dating-cta,
  .exile-download-btn,
  .button--stretched.svelte-23gx81 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prize popup */
  .rbxc-prize-popup:not([hidden]) {
    width: min(320px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* QR */
  #step-qr .qr.svelte-vywflk,
  #step-qr .qr.svelte-vywflk img,
  #step-qr .qr.svelte-vywflk .qr-spinner {
    width: min(256px, 72vw) !important;
    height: min(256px, 72vw) !important;
  }

  /* SMS code inputs */
  #code-inputs.code.svelte-j7f9bk {
    gap: clamp(4px, 1.5vw, 8px) !important;
    max-width: 100% !important;
    padding: 0 2px !important;
    flex-wrap: nowrap !important;
  }

  #code-inputs .digit.svelte-j7f9bk {
    width: clamp(34px, 12vw, 40px) !important;
    height: clamp(46px, 13vw, 52px) !important;
    font-size: clamp(20px, 5.5vw, 25px) !important;
    padding: 4px 2px !important;
  }

  .auth-step input.field.svelte-14rzpox,
  .auth-step #password-input,
  .auth-step #code-inputs .digit {
    font-size: 16px !important;
  }

  h1, h2, h3, p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}