/* 响应式样式 */

/* 小屏幕设备 (手机) */
@media (max-width: 575.98px) {
  .nav {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .nav-menu {
    display: none;
  }
  
  .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-md);
    padding: 0 var(--spacing-sm);
  }
  
  .game-container {
    flex-direction: column;
    padding: var(--spacing-sm);
  }
  
  .game-sidebar {
    width: 100%;
    order: -1;
  }
  
  .game-2048-grid,
  .game-huarongdao-grid {
    width: 280px;
    height: 280px;
  }
  
  .game-huarongdao-grid {
    height: 350px;
  }
  
  .admin-layout {
    flex-direction: column;
  }
  
  .admin-sidebar {
    width: 100%;
    padding: var(--spacing-md) 0;
  }
  
  .admin-menu {
    display: flex;
    overflow-x: auto;
    padding: 0 var(--spacing-md);
  }
  
  .admin-menu-item {
    margin: 0 var(--spacing-sm) 0 0;
    white-space: nowrap;
  }
  
  .admin-content {
    padding: var(--spacing-md);
  }
}

/* 中等屏幕设备 (平板) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md);
  }
  
  .game-sidebar {
    width: 240px;
  }
  
  .game-2048-grid,
  .game-huarongdao-grid {
    width: 300px;
    height: 300px;
  }
  
  .game-huarongdao-grid {
    height: 375px;
  }
}

/* 大屏幕设备 (桌面) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  
  .game-sidebar {
    width: 260px;
  }
}

/* 超大屏幕设备 */
@media (min-width: 992px) {
  .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}