/* Global Mobile Optimization */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-top {
  padding-top: var(--safe-top);
}

.safe-bottom {
  padding-bottom: var(--safe-bottom);
}

/* Fix for mobile horizontal overflow and base scaling */
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
  font-size: 16px; /* Base font size */
  line-height: 1.5;
}

@media (max-width: 480px) {
  body {
    font-size: 14px; /* Slightly smaller base for very small screens */
  }
}

/* Improve touch targets for children */
button, 
[role="button"] {
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  touch-action: manipulation;
}

/* Custom scrollbar for better visibility on mobile if needed */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
  .text-bubbly {
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  }
  
  /* Prevent zooming on input focus in iOS */
  input, select, textarea {
    font-size: 16px !important;
  }
  
  /* More padding for mobile modules */
  main {
    padding-bottom: 120px; /* Space for FloatingNav */
  }
}

/* Scanline and other animations */
.scanline {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  animation: scan 3s linear infinite;
}

@keyframes scan {
  from { top: 0; }
  to { top: 100%; }
}