/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

/* Destination Account Selection Styles */
.destination-account-option {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.destination-account-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.destination-account-option:active {
  transform: translateY(0);
}

/* Loading animation */
.loader {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Loading dots animation */
.loading-dot {
  animation: loading-dot 1.4s infinite ease-in-out both;
}

.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }
.loading-dot:nth-child(3) { animation-delay: 0s; }

@keyframes loading-dot {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Fast transition for loading overlay */
.transition-opacity-duration-2 {
  transition-duration: 300ms;
}

/* Mobile Responsive Improvements */
@media (max-width: 640px) {
  /* Ensure proper text wrapping and prevent overflow */
  .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  
  /* Improve button touch targets */
  button, a {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better spacing for mobile */
  .space-x-1 > * + * {
    margin-left: 0.25rem;
  }
  
  /* Improve scrollbar for mobile */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .overflow-x-auto::-webkit-scrollbar {
    display: none;
  }
  
  /* Ensure proper z-index for mobile menu */
  #sidebar {
    z-index: 50;
  }
  
  #mobile-menu-overlay {
    z-index: 40;
  }
  
  /* Improve mobile header layout */
  .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  /* Better mobile button sizing */
  .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  .py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
  
  /* Cleaner mobile button styling */
  .sm\:hidden {
    font-weight: 600;
    letter-spacing: 0.025em;
  }
  
  /* Reduce hover effects on mobile for cleaner look */
  @media (max-width: 640px) {
    .transform.hover\:scale-105:hover {
      transform: scale(1.02);
    }
    
    .shadow-lg.hover\:shadow-blue-500\/25:hover {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    
    /* Cleaner PLAY button on mobile */
    a[href*="player_dashboard"] .sm\:hidden {
      font-weight: 700;
      letter-spacing: 0.05em;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      text-align: center;
      display: block;
      width: 100%;
    }
    
    /* Ensure perfect text centering for all buttons */
    .flex.items-center.justify-center.text-center {
      text-align: center !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    /* Fix text alignment for button spans */
    .flex.items-center.justify-center.text-center span {
      text-align: center;
      width: 100%;
    }
    
    /* Ensure all buttons have centered text */
    button, a[class*="bg-gradient"] {
      text-align: center !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    /* Fix for buttons without flex classes */
    button:not([class*="flex"]), a[class*="bg-gradient"]:not([class*="flex"]) {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    /* Better mobile spacing for promotional banners */
    .grid.gap-6 {
      gap: 1.5rem;
    }
    
    /* Better mobile padding for promotional banners */
    .p-5 {
      padding: 1.25rem;
    }
    
    /* Better mobile spacing for game sections */
    .space-y-16 > * + * {
      margin-top: 4rem;
    }
    
    /* Better mobile spacing for game cards */
    .space-x-6 > * + * {
      margin-left: 1.5rem;
    }
    
    /* Better mobile bottom padding for scrollable areas */
    .pb-4 {
      padding-bottom: 1rem;
    }
    
    /* Enhanced desktop spacing and box appearance for game cards */
    @media (min-width: 1024px) {
      .lg\:space-x-16 > * + * {
        margin-left: 4rem;
      }
      
      /* Force desktop card width */
      .lg\:w-50 {
        width: 200px !important;
        height: 200px !important;
      }
      
      /* Balanced spacing for desktop game sections */
      .lg\:space-y-20 > * + * {
        margin-top: 5rem;
      }
      
      /* Enhanced desktop padding for game cards */
      .lg\:p-8 {
        padding: 2rem;
      }
      
      /* Enhanced card width for better proportions */
      .lg\:w-40 {
        width: 10rem;
      }
      
      /* Balanced bottom padding for scrollable areas */
      .lg\:pb-6 {
        padding-bottom: 1.5rem;
      }
      
      /* Enhanced box-like appearance */
      .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
      }
      
      .hover\:shadow-2xl:hover {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      }
      
      /* Stronger border for box appearance */
      .border-2 {
        border-width: 2px;
      }
      
      /* Force spacing to be more visible */
      #rebellion-originals-container,
      #slots-container,
      #publishers-container {
        gap: 4rem !important;
      }
      
      /* Force desktop changes to be visible */
      .lg\:p-8 {
        padding: 2rem !important;
      }
      
      .lg\:w-50 {
        width: 200px !important;
        height: 200px !important;
      }
      
      .lg\:text-xl {
        font-size: 1.25rem !important;
      }
      
      .lg\:text-lg {
        font-size: 1.125rem !important;
      }
      
      /* Ensure box appearance is visible */
      .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
      }
      
      /* Enhanced text proportions for 200px cards */
      .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.4;
      }
      
      .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.3;
      }
      
      .lg\:text-sm {
        font-size: 0.875rem;
        line-height: 1.2;
      }
      
      /* Better text wrapping for game cards */
      .break-words {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
        overflow: hidden;
      }
      
      .leading-tight {
        line-height: 1.2;
      }
      
      /* Fix text overlapping in game cards */
      .bg-gradient-to-br .text-white {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-word;
      }
      
      /* Ensure proper spacing between text elements */
      .bg-gradient-to-br .text-white + .text-white,
      .bg-gradient-to-br .text-gray-300 {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }
      
      /* Better icon proportions */
      .lg\:w-16 {
        width: 4rem;
      }
      
      .lg\:h-16 {
        height: 4rem;
      }
      
      /* Enhanced spacing for better proportions */
      .lg\:mb-5 {
        margin-bottom: 1.25rem;
      }
      
      .lg\:mb-4 {
        margin-bottom: 1rem;
      }
      
      .lg\:mb-3 {
        margin-bottom: 0.75rem;
      }
      
      /* Perfect square box appearance - FORCE 200px */
      .lg\:w-50 {
        width: 200px !important;
        height: 200px !important;
        min-width: 200px !important;
        min-height: 200px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
      }
      
      /* Ensure bottom section stays at bottom */
      .lg\:w-50 .flex.items-center.justify-between {
        margin-top: auto !important;
        width: 100% !important;
      }
      
      /* Play Now button styling */
      .lg\:w-50 button.bg-gradient-to-r {
        min-height: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      
      /* Mobile square boxes */
      .w-24.h-24 {
        width: 6rem !important;
        height: 6rem !important;
      }
      
      /* Enhanced box shadows for perfect boxes */
      .shadow-lg {
        box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
      }
      
      .hover\:shadow-2xl:hover {
        box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.6) !important;
      }
    }
    
    /* Enhanced horizontal scrolling for category filters */
    .overflow-x-auto.scrollbar-hide {
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-behavior: smooth;
    }
    
    /* Mobile-specific spacing adjustments */
    @media (max-width: 1023px) {
      .space-x-3 > * + * {
        margin-left: 0.75rem;
      }
      
      /* Mobile card width */
      .w-24 {
        width: 6rem;
      }
      
      /* Mobile padding adjustments */
      .p-4 {
        padding: 1rem;
      }
    }
    
    .overflow-x-auto.scrollbar-hide::-webkit-scrollbar {
      display: none;
    }
    
    /* Better spacing for category filter buttons */
    .space-x-3 > * + * {
      margin-left: 0.75rem;
    }
    
    /* Ensure buttons don't shrink on mobile */
    .flex-shrink-0 {
      flex-shrink: 0;
    }
    
    /* Better touch targets for mobile buttons */
    .px-4 {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    
    .py-2 {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    
    /* Universal chevron button styling for all sections */
    #category-scroll-right,
    #rebellion-originals-left,
    #rebellion-originals-right,
    #slots-left,
    #slots-right,
    #publishers-left,
    #publishers-right {
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Category filter chevron button alignment */
    #category-scroll-right {
      align-self: flex-start;
      margin-top: 0;
      height: auto;
    }
    
    /* Ensure category filter container alignment */
    .flex.items-center.mb-6.lg\:mb-12 {
      align-items: flex-start;
    }
    
    #category-scroll-right:disabled,
    #category-scroll-right.opacity-50,
    #rebellion-originals-left:disabled,
    #rebellion-originals-left.opacity-50,
    #rebellion-originals-right:disabled,
    #rebellion-originals-right.opacity-50,
    #slots-left:disabled,
    #slots-left.opacity-50,
    #slots-right:disabled,
    #slots-right.opacity-50,
    #publishers-left:disabled,
    #publishers-left.opacity-50,
    #publishers-right:disabled,
    #publishers-right.opacity-50 {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    #category-scroll-right:disabled:hover,
    #category-scroll-right.opacity-50:hover,
    #rebellion-originals-left:disabled:hover,
    #rebellion-originals-left.opacity-50:hover,
    #rebellion-originals-right:disabled:hover,
    #rebellion-originals-right.opacity-50:hover,
    #slots-left:disabled:hover,
    #slots-left.opacity-50:hover,
    #slots-right:disabled:hover,
    #slots-right.opacity-50:hover,
    #publishers-left:disabled:hover,
    #publishers-left.opacity-50:hover,
    #publishers-right:disabled:hover,
    #publishers-right.opacity-50:hover {
      background-color: rgb(55 65 81) !important;
    }
  }
}

/* Ensure loading overlay is always on top */
#loading-overlay {
  z-index: 9999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 300ms ease-in-out !important;
}

/* Hidden state */
#loading-overlay.hidden,
#loading-overlay[style*="display: none"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}