/* ============================================================
   default 主题基础样式 + 组件（方案书 §11.3/§11.4）
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-1) var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 60px;
}

.site-logo { font-weight: 700; font-size: 1.15rem; color: var(--color-primary); }
.site-logo span { color: var(--color-teal); }

.site-nav { display: flex; gap: var(--space-1); margin-left: var(--space-2); }
.site-nav a { padding: 6px 12px; border-radius: var(--radius-sm); color: var(--color-text-muted); }
.site-nav a:hover, .site-nav a.is-active { color: var(--color-primary); background: rgba(74, 144, 217, .08); }

.site-locale { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.site-locale a { padding: 4px 8px; border-radius: 4px; color: var(--color-text-muted); }
.site-locale a.is-active { background: var(--color-primary); color: var(--color-text-invert); }

/* ---- 语言下拉（多语种；header 全站共用，样式必须随基础主题生效） ---- */
.locale-menu { position: relative; }
.locale-menu__trigger {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 4px; cursor: pointer;
  font-size: .85rem; color: var(--color-text-muted); list-style: none;
}
.locale-menu__trigger::-webkit-details-marker { display: none; }
.locale-menu__trigger:hover { color: var(--color-primary); }
.locale-menu__trigger svg { width: 15px; height: 15px; fill: currentColor; opacity: .8; }
.locale-menu__caret { width: 12px !important; height: 12px !important; transition: transform .15s; }
.locale-menu[open] .locale-menu__caret { transform: rotate(180deg); }
/* 关闭态不保留布局盒：绝对定位会让 Chrome 跳过 details 的 content-visibility，
   留下一个不参与绘制的“幽灵盒”，会干扰几何测量与日后调试 */
.locale-menu:not([open]) .locale-menu__list { display: none; }

.locale-menu__list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 176px; max-height: 62vh; overflow-y: auto; margin: 0; padding: 6px;
  list-style: none; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.locale-menu__list a { display: block; padding: 7px 10px; border-radius: var(--radius-sm); font-size: .9rem; color: var(--color-text); }
.locale-menu__list a:hover { background: rgba(74, 144, 217, .08); color: var(--color-primary); }
.locale-menu__list a.is-active { background: var(--color-primary); color: var(--color-text-invert); font-weight: 600; }

/* ---- 导航账号区与头像（会员中心 §3.2.3/§3.7）：header 全站共用，样式从 member.css 归位于此 ---- */
.site-account { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-1); }
.account-menu { position: relative; }
.account-menu__trigger { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; list-style: none; }
.account-menu__trigger::-webkit-details-marker { display: none; }
.account-menu__trigger:hover { background: rgba(74, 144, 217, .08); }
.account-menu__name { font-size: 14px; color: var(--color-text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 150px; display: flex; flex-direction: column; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 30; }
.account-menu__list a, .account-menu__list button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font-size: 14px; text-align: left; cursor: pointer; }
.account-menu__list a:hover, .account-menu__list button:hover { background: rgba(74, 144, 217, .08); color: var(--color-primary); }

.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; object-fit: cover; background: var(--color-primary-light); color: var(--color-text-invert); font-weight: 600; }
.avatar--sm { width: 28px; height: 28px; font-size: 13px; }
.avatar--md { width: 40px; height: 40px; font-size: 17px; }
.avatar--lg { width: 64px; height: 64px; font-size: 26px; }
.avatar--letter { user-select: none; }

.site-main { max-width: 1200px; margin: 0 auto; padding: var(--space-3) var(--space-2); min-height: 60vh; }

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: .85rem;
}
.site-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: var(--space-3) var(--space-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-1) var(--space-2);
}
.site-footer__copy { margin: 0; }
/* Footer 导航（关于我们 / Cookie政策 / 隐私声明 / 服务条款 / 联系方式 / 网站地图）：
   继承页脚弱化的文字色，hover 回主色，避免在深色页脚上抢过内容区 */
.site-footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.site-footer__nav a { color: inherit; }
.site-footer__nav a:hover { color: var(--color-primary); }

/* ---- 按钮（§11.4 Button） ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-target); padding: 0 var(--space-2);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: .95rem; cursor: pointer; transition: all var(--ease-base);
}
.btn-primary { background: var(--color-primary); color: var(--color-text-invert); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-accent { background: var(--color-accent); color: var(--color-text-invert); }
.btn-accent:hover { background: var(--color-accent-dark); }
.btn-ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---- 卡片（§11.4 Card） ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card__media { aspect-ratio: 4/3; background: #e9eef5; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: .8rem; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-2); }

/* ---- 标签（§11.4 Tag，按类型着色） ---- */
.tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .75rem; line-height: 1.7; margin: 2px 4px 2px 0;
}
.tag--category    { background: #e7f1fb; color: #2c5f8a; }
.tag--theme       { background: #e6f7f4; color: #17675d; }
.tag--difficulty  { background: #fff3e2; color: #a85e1b; }
.tag--gameplay    { background: #f0eafb; color: #5c3d99; }
.tag--asset       { background: #eef0f3; color: #4a5560; }
.tag--context     { background: #fdeeee; color: #a33; }

/* ---- 排行榜条目（§11.4，名次徽标） ---- */
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.rank-item {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-1) var(--space-2);
}
.rank-item__medal {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--color-text-invert); flex-shrink: 0;
}
.rank-item__medal--1 { background: var(--color-rank-1); }
.rank-item__medal--2 { background: var(--color-rank-2); }
.rank-item__medal--3 { background: var(--color-rank-3); }
.rank-item__medal--n { background: var(--color-border); color: var(--color-text-muted); }
.rank-item__name { flex: 1; }
.rank-item__score { color: var(--color-accent); font-weight: 600; }

/* ---- 网格/多列工具 ---- */
.grid { display: grid; gap: var(--space-2); }
.grid--puzzles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---- 首页 Hero ---- */
.hero {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-teal));
  color: var(--color-text-invert);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.hero h1 { margin: 0 0 var(--space-1); font-size: 2rem; }
.hero p { margin: 0 0 var(--space-2); opacity: .95; max-width: 560px; }

/* 响应式（§11.6 移动端单列优先） */
@media (max-width: 720px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; margin-left: 0; }
  .hero { padding: var(--space-3); }
  .hero h1 { font-size: 1.5rem; }
}

/* ---- 分类快捷 chips（V2 §7.2：图库搜索） ---- */
.chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); font-size: .82rem; line-height: 1.5;
  transition: all var(--ease-base);
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-invert); }

/* ---- 多人实时看板（V2 §4.5/§4.6：四字段 + 状态徽标） ---- */
.card--live .card__media { position: relative; }
.card--live .card__media img { display: block; }

.live-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 10px; border-radius: 999px;
  font-size: .72rem; line-height: 1.7; color: var(--color-text-invert);
  background: rgba(34, 48, 62, .66);
}
.live-badge--open { background: rgba(46, 158, 91, .88); }
.live-badge--full { background: rgba(217, 83, 79, .88); }
.live-badge--finished { background: rgba(107, 122, 138, .88); }

.live-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: .82rem; color: var(--color-text-muted); }
.live-meta__item { background: #eef3f9; border-radius: 6px; padding: 2px 8px; }