/* Game Container - Parent element cho canvas */
.game-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden; /* Ngăn overflow */
  background-color: #333; /* Màu nền tối để dễ nhận biết khi load */
}

/* Mobile specific styles */
@media (max-width: 768px) {
  /* Hide scroll bars */
  ::-webkit-scrollbar {
    display: none;
  }
  
  body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    touch-action: none; /* Prevent browser handling of touch events */
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: #000; /* Đảm bảo không có vùng trắng */
  }
  
  /* Reset một số style mặc định có thể gây lỗi */
  html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Fix for iOS Safari's viewport height issue */
  @supports (-webkit-touch-callout: none) {
    html {
      height: -webkit-fill-available;
    }
    
    body {
      height: 100vh; /* Fallback */
      height: -webkit-fill-available;
      width: 100vw;
    }
    
    .game-container {
      height: 100vh; /* Fallback */
      height: -webkit-fill-available;
      min-height: -webkit-fill-available;
      width: 100vw;
    }
  }
  
  /* Fixes for touch controls */
  #gameCanvas {
    touch-action: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    user-select: none;          /* Non-prefixed version */
    image-rendering: -webkit-optimize-contrast; /* Cải thiện hiển thị trên các thiết bị màn hình retina */
  }
  
  /* Disable pull to refresh */
  html, body {
    overscroll-behavior: none;
    overscroll-behavior-y: contain;
  }
  
  /* Improve tap response */
  a, button, [role="button"] {
    touch-action: manipulation;
  }
  
  /* Prevent visual highlighting */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Xử lý đặc biệt chế độ dọc trên điện thoại */
  @media (orientation: portrait) {
    /* Giữ cho container đủ kích thước */
    .game-container {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      min-height: -webkit-fill-available;
      padding: 0;
      margin: 0;
    }
    
    /* Đặc biệt cho canvas trong chế độ dọc */
    #gameCanvas {
      /* Đảm bảo canvas hiển thị tốt ở chế độ dọc */
      max-width: 95vw;
      max-height: 80vh;
      margin: 0 auto;
      display: block;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Bóng đổ để canvas nổi bật */
    }
  }
  
  /* Kiểu hiển thị cho iOS device */
  @supports (-webkit-touch-callout: none) {
    @media (orientation: portrait) {
      /* Fix đặc biệt cho iOS */
      #gameCanvas {
        transform: translate(-50%, -50%) !important; /* Đảm bảo transform hoạt động */
      }
      
      /* Thêm padding an toàn cho các thiết bị có notch */
      .game-container {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
      }
    }
  }
}