/* App Responsive Enhancements - Lumnix */

/* Melhorias gerais de responsividade */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Otimizações para touch devices */
@media (hover: none) and (pointer: coarse) {
  .mode-card,
  .tile,
  .cta-button,
  .iwant-button {
    -webkit-tap-highlight-color: rgba(46, 204, 113, 0.3);
    tap-highlight-color: rgba(46, 204, 113, 0.3);
  }
  
  .mode-card:hover,
  .tile:hover {
    transform: none;
  }
  
  .mode-card:active,
  .tile:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
}

/* Melhorias para telas pequenas */
@media (max-width: 600px) {
  /* Otimização de espaçamento */
  .invix-section {
    padding: 5px;
  }
  
  /* Melhor uso do espaço vertical */
  .welcome-banner {
    margin-bottom: 15px;
  }
  
  .categories-section {
    margin-bottom: 15px;
  }
  
  /* Otimização de texto */
  .mode-card p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  /* Melhor visibilidade dos botões */
  .cta-button {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }
}

/* Otimizações para orientação portrait */
@media (max-width: 768px) and (orientation: portrait) {
  .dashboard-grid,
  .category-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
  }
  
  .mode-card {
    min-height: 100px;
    padding: 6px;
  }
  
  .mode-card .emoji-icon {
    font-size: 2rem;
  }
  
  .mode-card p {
    font-size: 0.75rem;
    line-height: 1.1;
  }
}

/* Otimizações para orientação landscape em mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .welcome-banner {
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    padding: 10px;
  }
  
  .skills-xp-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  
  .category-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
  
  .mode-card {
    min-height: 80px;
    padding: 4px;
  }
  
  .mode-card .emoji-icon {
    font-size: 1.5rem;
  }
  
  .mode-card p {
    font-size: 0.65rem;
  }
}

/* Melhorias para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .dashboard-grid,
  .category-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
  }
  
  .featured-games-section {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  
  .mode-card {
    min-height: 130px;
    padding: 10px;
  }
  
  .mode-card .emoji-icon {
    font-size: 2.5rem;
  }
  
  .mode-card p {
    font-size: 0.85rem;
  }
}

/* Melhorias para telas grandes */
@media (min-width: 1200px) {
  .dashboard-grid,
  .category-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
  }
  
  .featured-games-section {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
  
  .mode-card {
    min-height: 160px;
    padding: 15px;
  }
  
  .mode-card .emoji-icon {
    font-size: 3.5rem;
  }
  
  .mode-card p {
    font-size: 1rem;
  }
}

/* Otimizações para performance em mobile */
@media (max-width: 768px) {
  /* Reduz animações em dispositivos móveis */
  .mode-card,
  .tile,
  .iwant-button {
    transition: transform 0.2s ease;
  }
  
  /* Otimiza backdrop-filter para mobile */
  .invix-sidebar,
  .tile,
  .welcome-banner,
  .settings-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Melhorias de acessibilidade */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .mode-card:hover,
  .tile:hover {
    transform: none !important;
  }
}

/* Alto contraste */
@media (prefers-contrast: high) {
  .mode-card,
  .tile,
  .cta-button {
    border: 2px solid var(--accent-color);
  }
  
  .mode-card p,
  .tile p {
    color: #FFFFFF;
    font-weight: 500;
  }
}

/* Modo escuro do sistema */
@media (prefers-color-scheme: dark) {
  /* Já está otimizado para escuro por padrão */
}

/* Otimizações específicas para iOS */
@supports (-webkit-touch-callout: none) {
  .invix-sidebar,
  .invix-main {
    -webkit-overflow-scrolling: touch;
  }
  
  .mode-card,
  .tile,
  .cta-button {
    -webkit-tap-highlight-color: rgba(46, 204, 113, 0.3);
  }
}

/* Otimizações para Android */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
  .mode-card .emoji-icon,
  .tile .emoji-icon {
    text-rendering: optimizeLegibility;
  }
}

/* Melhorias para telas de alta densidade */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .mode-card,
  .tile {
    border-radius: 8px;
  }
  
  .cta-button {
    border-radius: 6px;
  }
}

/* Otimizações para PWA */
@media (display-mode: standalone) {
  .invix-main {
    padding-top: env(safe-area-inset-top, 15px);
    padding-bottom: env(safe-area-inset-bottom, 15px);
  }
  
  #back-button {
    top: calc(env(safe-area-inset-top, 15px) + 10px);
  }
}

/* Melhorias para notch/safe areas */
@supports (padding: max(0px)) {
  .invix-main {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
  
  .invix-sidebar {
    padding-left: max(15px, env(safe-area-inset-left));
  }
}