@import "tailwindcss";

@layer base {
  html, body {
    @apply h-full w-full overflow-hidden;
    /* Use dynamic viewport height if supported */
    height: 100dvh;
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Specific overrides for mobile-first threshold strictly matching user request 786px */
@media (max-width: 786px) {
  html {
     font-size: 13.5px; /* Global scale down */
  }
}

/* Handle ultra-small screens */
@media (max-width: 340px) {
  html {
    font-size: 11px;
  }
}

/* Specific overrides for very small screens (< 360px) */
@media (max-width: 360px) {
  html {
     font-size: 12px;
  }
  .text-7xl { font-size: 3.5rem; line-height: 1; }
  .text-8xl { font-size: 4rem; line-height: 1; }
  .text-9xl { font-size: 5rem; line-height: 1; }
  
  .p-6 { padding: 1rem; }
  .p-8 { padding: 1.25rem; }
  .gap-4 { gap: 0.75rem; }
  
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
}

/* Handle mobile browser address bar issues */
.h-screen-safe {
  height: 100vh;
  height: 100dvh;
}