/* ===== CSS RESPONSIVO AVANÇADO ===== */

/* ===== DISPOSITIVOS MUITO PEQUENOS (320px e abaixo) ===== */
@media (max-width: 320px) {
  .container {
    padding: 0 8px;
  }
  
  .gameheader {
    height: 55px;
    width: 99%;
    top: 3px;
    padding: 0 8px;
  }
  
  .gameavatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  
  .header-content {
    margin: 0 8px;
  }
  
  .player-id {
    font-size: 11px;
  }
  
  .gamefooter {
    height: 48px;
    width: 99%;
    bottom: 5px;
    border-radius: 10px;
  }
  
  .footer-btn {
    gap: 4px;
  }
  
  .btn-icon svg {
    width: 13px;
    height: 13px;
  }
  
  .btn-label {
    font-size: 0.7rem;
  }
}

/* ===== CELULARES PEQUENOS (360px - 480px) ===== */
@media (min-width: 321px) and (max-width: 480px) {
  .chests-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .chest-item {
    min-height: 130px;
    padding: 12px 8px;
  }
  
  .chest-icon img {
    width: 60px !important;
    height: 60px !important;
  }
  
  .chest-title {
    font-size: 13px;
    margin-bottom: 4px;
  }
  
  .chest-prize {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  .chest-requirement {
    font-size: 10px;
    margin-bottom: 8px;
  }
  
  .open-chest-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .profile-modal,
  .auth-modal {
    width: 95%;
    margin: 10px;
    border-radius: 16px;
    max-height: calc(100vh - 40px);
  }
  
  .profile-modal-header,
  .auth-modal-header {
    padding: 15px 20px;
  }
  
  .profile-modal-content,
  .auth-modal-content {
    padding: 20px;
  }
  
  .profile-modal-header h2,
  .auth-modal-header h2 {
    font-size: 1.1rem;
  }
}

/* ===== TABLETS PEQUENOS (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
  .chests-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  
  .chest-item {
    min-height: 150px;
    padding: 15px;
  }
  
  .chest-icon img {
    width: 70px !important;
    height: 70px !important;
  }
  
  .profile-modal,
  .auth-modal {
    max-width: 450px;
  }
  
  .profile-modal-header,
  .auth-modal-header {
    padding: 20px 25px;
  }
  
  .profile-modal-content,
  .auth-modal-content {
    padding: 25px;
  }
  
  .gameheader {
    height: 65px;
    width: 96%;
    top: 6px;
  }
  
  .gamefooter {
    height: 55px;
    width: 96%;
    bottom: 6px;
  }
}

/* ===== TABLETS GRANDES (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .chests-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  .chest-item {
    min-height: 160px;
    padding: 18px;
  }
  
  .chest-icon img {
    width: 80px !important;
    height: 80px !important;
  }
  
  .gameheader {
    height: 70px;
    width: 94%;
    top: 8px;
  }
  
  .gamefooter {
    height: 60px;
    width: 94%;
    bottom: 8px;
  }
}

/* ===== DESKTOPS PEQUENOS (1025px - 1280px) ===== */
@media (min-width: 1025px) and (max-width: 1280px) {
  .chests-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
  }
  
  .chest-item {
    min-height: 170px;
    padding: 20px;
  }
  
  .chest-icon img {
    width: 85px !important;
    height: 85px !important;
  }
}

/* ===== DESKTOPS GRANDES (1281px e acima) ===== */
@media (min-width: 1281px) {
  .chests-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 25px;
  }
  
  .chest-item {
    min-height: 180px;
    padding: 22px;
  }
  
  .chest-icon img {
    width: 90px !important;
    height: 90px !important;
  }
}

/* ===== ORIENTAÇÃO LANDSCAPE EM DISPOSITIVOS MÓVEIS ===== */
@media (max-width: 768px) and (orientation: landscape) {
  .gameheader {
    height: 50px;
    top: 3px;
  }
  
  .gamefooter {
    height: 45px;
    bottom: 3px;
  }
  
  .chests-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  
  .chest-item {
    min-height: 120px;
    padding: 10px;
  }
  
  .chest-icon img {
    width: 50px !important;
    height: 50px !important;
  }
}

/* ===== OTIMIZAÇÕES PARA TOUCH ===== */
@media (hover: none) and (pointer: coarse) {
  /* Botões maiores para touch */
  .open-chest-btn,
  .footer-btn,
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Espaçamento maior entre elementos clicáveis */
  .chest-item {
    margin-bottom: 15px;
  }
  
  /* Feedback visual para touch */
  .chest-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .btn:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
}

/* ===== OTIMIZAÇÕES PARA DISPOSITIVOS DE ALTA DENSIDADE ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .chest-icon img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ===== SUPORTE PARA DARK MODE ===== */
@media (prefers-color-scheme: dark) {
  .chest-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .chest-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }
}

/* ===== SUPORTE PARA REDUÇÃO DE MOVIMENTO ===== */
@media (prefers-reduced-motion: reduce) {
  .chest-item,
  .btn,
  .falling-leaf {
    animation: none;
    transition: none;
  }
  
  .chest-item:hover {
    transform: none;
  }
}

/* ===== OTIMIZAÇÕES PARA DISPOSITIVOS COM NOTCH ===== */
@supports (padding: max(0px)) {
  .gameheader {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  
  .gamefooter {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* ===== FIXES PARA SAFARI iOS ===== */
@supports (-webkit-touch-callout: none) {
  .chest-item {
    -webkit-tap-highlight-color: transparent;
  }
  
  .btn {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ===== FIXES PARA ANDROID CHROME ===== */
@supports (-webkit-overflow-scrolling: touch) {
  .chests-grid {
    -webkit-overflow-scrolling: touch;
  }
  
  .chest-item {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}