/* ---------------------------------------------------------------------- */
/* header.css - 干净、修复且完整的网站样式 */
/* ---------------------------------------------------------------------- */

/* ## 0. 根变量 (Root Variables) */
:root {
  --color-primary: #ff504f;
  --color-text-dark: #222222;
  --color-text-light: #666666;
  --color-border: #e8e8e8;
  --color-bg-light: #f7f7f7;
  --navbar-height: 60px;
  --sidebar-left-width-desktop: 200px;
  --sidebar-left-width-tablet: 60px;
  --sidebar-right-width: 300px;
}

/* ---------------------------------------------------------------------- */
/* ## 1. Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--color-bg-light);
  color: var(--color-text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: var(--color-text-dark); }

/* ---------------------------------------------------------------------- */
/* ## 2. Top Bar 基础结构 */
.navbar.top-bar {
  width: 100%; background: #ffffff; border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 9999; height: var(--navbar-height);
  line-height: var(--navbar-height);
}
.navbar .container {
  max-width: 1200px; margin: 0 auto; display: flex; align-items: center;
  gap: 20px; justify-content: space-between; padding: 0 16px; height: 100%;
}

/* ---------------------------------------------------------------------- */
/* ## 3. Logo */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo a { display: flex; align-items: center; gap: 8px; }
.logo-img { width: auto; height: 40px; object-fit: contain; }
.site-title-text { display: none !important; }

/* ---------------------------------------------------------------------- */
/* ## 4. 右侧区域 (搜索和用户) */
.right-area { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-shrink: 0;}
.search-box { line-height: initial; }
.search-box form { display: flex; align-items: center; background: var(--color-bg-light); border-radius: 20px; }
.search-box input { border: none; background: transparent; padding: 6px 12px; font-size: 16px; width: 220px; outline: none; color: var(--color-text-dark); }
.search-box button { background: transparent; color: var(--color-text-light); border: none; padding: 6px 12px; border-radius: 0 20px 20px 0; cursor: pointer; font-size: 16px; }
.search-box button:hover { color: var(--color-primary); }
.user-area a { white-space: nowrap; color: var(--color-text-dark); font-size: 14px; }
.user-area .avatar-small { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* ---------------------------------------------------------------------- */
/* ## 5. 手机端 Hamburger & Mobile Menu */
.hamburger { display: none; background: transparent; border: 0; font-size: 28px; cursor: pointer; color: var(--color-text-dark); padding: 0 8px; line-height: var(--navbar-height); }
.mobile-menu {
  display: none; flex-direction: column; gap: 4px; 
  position: fixed; 
  top: var(--navbar-height);
  right: 8px; width: 180px; padding: 10px; background: #fff; border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1); border-radius: 8px; z-index: 10000;
}
.mobile-menu a { color: var(--color-text-dark); padding: 8px 10px; display: block; border-radius: 6px; font-size: 16px; line-height: 1.3; }
.mobile-menu a:hover { background: #fff0f0; color: var(--color-primary); }
.show-menu { display: flex !important; }


/* ---------------------------------------------------------------------- */
/* ## 6. 桌面端 Grid 结构 (默认 3 栏) */
.layout-grid {
  width: 100%; max-width: 1200px; margin: 0 auto; padding-top: 20px;
  display: grid; 
  grid-template-columns: var(--sidebar-left-width-desktop) 1fr var(--sidebar-right-width);
  min-height: calc(100vh - var(--navbar-height)); gap: 30px;
  padding-left: 16px; padding-right: 16px;
  padding-bottom: 50px; 
}

/* ---------------------------------------------------------------------- */
/* ## 7. 侧边栏样式 (Left & Right Sidebar) */
.sidebar-left {
  padding: 15px; 
  position: sticky; 
  top: calc(var(--navbar-height) + 20px); 
  height: fit-content; 
  background: #ffffff; 
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}
.main-nav-menu .nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.main-nav-menu .nav-item { display: flex; align-items: center; font-size: 16px; padding: 10px 15px; border-radius: 8px; color: var(--color-text-dark); transition: background 0.2s, color 0.2s; }
.main-nav-menu .nav-item:hover, .main-nav-menu .nav-item.active { background: #fff0f0; color: var(--color-primary); font-weight: bold; }
.main-nav-menu .nav-icon { margin-right: 10px; font-size: 18px; }
.main-nav-menu .nav-text { display: block; }

.sidebar-right {
  display: block; 
  padding: 0; 
  position: sticky; top: calc(var(--navbar-height) + 20px); 
  height: fit-content;
  text-align: left;
}
.widget-box { 
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  padding: 15px; 
  margin-bottom: 15px; 
}
.widget-box h3 { 
  margin-top: 0; margin-bottom: 10px; font-size: 16px; color: var(--color-text-dark); 
  text-align: left;
}
/* 移除废弃的 desktop-embedded-footer 样式 */
.desktop-embedded-footer { display: none !important; }

/* 高亮样式 */
.main-nav-menu .nav-item:hover, 
.main-nav-menu .nav-item.active { 
    background: #fff0f0; /* 浅红色背景 */
    color: var(--color-primary); /* 主题颜色字体 */
    font-weight: bold; 
}

/* ---------------------------------------------------------------------- */
/* ## 8. Main Content & Cards */
.main-content-feed { min-width: 0; padding-bottom: 50px; }
.main-content-feed h1 { font-size: 28px; color: var(--color-text-dark); margin-bottom: 20px; }
.game-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 20px; 
  margin-top: 20px; 
}
.game-card { background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; display: block; }
.game-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
.card-cover { width: 100%; padding-top: 75%; position: relative; background: var(--color-bg-light); }
.card-cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.card-info { padding: 12px; }
.card-info h3 { font-size: 16px; color: var(--color-text-dark); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-info .rating { font-size: 14px; color: var(--color-text-light); }
.card-info .rating strong { color: var(--color-primary); font-weight: bold; margin-right: 4px; }


/* ---------------------------------------------------------------------- */
/* ## 9. Footer 底部样式 (全局样式 - 修复桌面显示问题并居中) */
/* ---------------------------------------------------------------------- */

.footer {
    width: 100%; 
    background: transparent; 
    border-top: 1px solid var(--color-border);
    padding: 30px 16px;
    font-size: 13px; 
    line-height: 1.4; 
    color: var(--color-text-light);
    margin-top: 50px; /* 增加与主内容的间隔 */
}
.footer .footer-inner-content { 
    max-width: 1200px; 
    margin: 0 auto; 
    /* 【核心修改：默认居中】 */
    text-align: center; 
}
.footer p { 
    margin: 5px 0; 
    font-size: 12px; 
    color: var(--color-text-light); 
}
.footer a { 
    color: var(--color-text-light); 
    transition: color 0.2s; 
    margin: 0 5px; /* 调整链接间距以适应居中 */
}
.footer a:hover { 
    color: var(--color-primary); 
}

/* ---------------------------------------------------------------------- */
/* ## 10. 响应式断点 (最终版) */

/* 平板 Icon 模式 (601px - 960px) */
@media (max-width: 960px) and (min-width: 601px) {
  .layout-grid {
    grid-template-columns: var(--sidebar-left-width-tablet) 1fr;
    gap: 20px; 
  }
  .sidebar-right { display: none; }
  .main-nav-menu .nav-text { display: none; }
  .sidebar-left { padding: 10px 5px; }
  .logo-img { height: 32px; }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 手机模式 (600px 及以下) */
@media (max-width: 600px) { 
  /* 布局重排 */
  .layout-grid {
    display: flex; 
    flex-direction: column; 
    padding: 0;
    gap: 0;
  }
  
  /* 侧边栏和主内容顺序 */
  .sidebar-right {
    order: 1; 
    padding: 15px 16px 0; 
    position: static; 
  }
  .main-content-feed {
    order: 2; 
    padding: 20px 16px;
    padding-top: 0; 
  }
  .sidebar-left { display: none !important; }

  /* 页脚调整 */
  .footer {
    order: 3;
    padding-top: 0;
    padding-bottom: 30px;
    margin-top: 0;
    border-top: none;
  }
  /* .footer .footer-inner-content 的居中已在 #9 中处理，这里无需重复设置 */
  
  /* 其他手机样式 */
  .widget-box { 
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px;
    margin-bottom: 20px; 
  }
  .widget-box h3 { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
  .hamburger { display: block; }
  .logo-img { height: 28px; }
  .search-box input { width: 100px !important; }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
}