/* ============================================
   半日闲棋牌 · 公共样式 v1.0
   设计风格：暖木色 · 中式雅致 · 现代扁平
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  /* 主色调 */
  --bg-primary: #f6f9f0;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-dark: #0a3b1f;

  /* 墨绿色系 */
  --wood-light: #c8dcc0;
  --wood-mid: #0d5228;
  --wood-dark: #0d5228;
  --wood-deep: #0a3b1f;

  /* 文字 */
  --text-primary: #3f3226;
  --text-secondary: #5a6a4a;
  --text-muted: #8a9a8a;
  --text-light: #fff5e0;

  /* 品牌色 */
  --brand-red: #b03020;
  --brand-gold: #d4a853;
  --brand-green: #0d5228;

  /* 状态色 */
  --success: #4a8a2e;
  --warning: #d4a853;
  --danger: #b03020;
  --info: #3a6b8c;

  /* 稀有度 */
  --rarity-common: #8a7a6a;
  --rarity-rare: #3a6b8c;
  --rarity-epic: #7a4ab0;
  --rarity-legend: #d48a20;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(13, 82, 40, 0.08);
  --shadow-md: 0 4px 16px rgba(13, 82, 40, 0.12);
  --shadow-lg: 0 8px 32px rgba(13, 82, 40, 0.18);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.1);

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* 底部导航高度 */
  --tab-bar-height: 60px;
}

html, body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body {
  padding-bottom: var(--tab-bar-height);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

/* ====== 通用组件 ====== */

/* 卡片 */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(13, 82, 40, 0.12);
}

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  background: linear-gradient(135deg, #0D5228, #0A3B1F);
  color: #fff;
  box-shadow: 0 4px 12px rgba(13, 82, 40, 0.3);
}
.btn-primary:active { box-shadow: 0 2px 6px rgba(13, 82, 40, 0.3); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--wood-dark);
  border: 1px solid rgba(13, 82, 40, 0.2);
}

.btn-danger {
  background: #fdecea;
  color: #a93226;
}

/* 标签 */
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.tag-common { background: #e8e4df; color: #6a5e50; }
.tag-rare { background: #e0edf5; color: #2c5f8a; }
.tag-epic { background: #ede0f5; color: #6a3a8a; }
.tag-legend { background: #f5e6cc; color: #8a5a1a; }

/* 分隔线 */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(13, 82, 40, 0.2), transparent);
  margin: var(--space-md) 0;
}

/* ====== 页面容器 ====== */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-md);
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--wood-deep);
  margin-bottom: var(--space-md);
}

/* ====== 顶部用户栏 ====== */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  max-width: 480px;
  margin: 0 auto;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f0e0, #c8dcc0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid var(--wood-mid);
  position: relative;
}

.avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}

.user-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.user-title {
  font-size: 12px;
  color: var(--text-muted);
}

.xiandian-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #fff3d0, #ffe08a);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #0D5228;
  box-shadow: var(--shadow-sm);
}

.xiandian-icon { font-size: 16px; }

/* ====== 底部导航 ====== */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tab-bar-height);
  background: rgba(246, 249, 240, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid rgba(13, 82, 40, 0.1);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: 11px;
  transition: color 0.2s;
  cursor: pointer;
}

.tab-item .tab-icon { font-size: 22px; }

.tab-item.active {
  color: var(--brand-green);
  font-weight: 500;
}

.tab-item.active .tab-icon {
  transform: scale(1.1);
}

/* ====== 游戏卡片 ====== */
.game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: var(--space-md);
}

.game-card {
  position: relative;
  aspect-ratio: 1 / 1.1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-md);
}

.game-card:active {
  transform: scale(0.96);
}

.game-card-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.game-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff;
}

.game-card-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.game-card-desc {
  font-size: 11px;
  opacity: 0.8;
}

.game-card-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--wood-dark);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

/* 各游戏主题色 */
.game-xiangqi .game-card-bg { background: linear-gradient(135deg, #e8c48a, #c9966b); }
.game-guoxiang .game-card-bg { background: linear-gradient(135deg, #f0e6d3, #d4c4a8); }
.game-mahjong .game-card-bg { background: linear-gradient(135deg, #8bc34a, #558b2f); }
.game-doudizhu .game-card-bg { background: linear-gradient(135deg, #ef5350, #c62828); }
.game-caizi .game-card-bg { background: linear-gradient(135deg, #7986cb, #3f51b5); }
.game-yang .game-card-bg { background: linear-gradient(135deg, #ffb74d, #f57c00); }

/* ====== 我的页面 ====== */
.profile-header {
  background: linear-gradient(135deg, var(--wood-dark), var(--wood-deep));
  color: var(--text-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.profile-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(212, 168, 83, 0.3), transparent 70%);
  border-radius: 50%;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8c9a0, #c9966b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border: 3px solid rgba(212, 168, 83, 0.5);
  margin-bottom: 12px;
}

.profile-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.profile-title {
  font-size: 13px;
  opacity: 0.8;
}

.stats-row {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--brand-gold);
}

.stat-label {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 2px;
}

.menu-list {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 14px;
  border-bottom: 1px solid rgba(139, 90, 43, 0.06);
  cursor: pointer;
  transition: background 0.15s;
}

.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: rgba(139, 90, 43, 0.06); }

.menu-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--bg-primary);
}

.menu-text {
  flex: 1;
  font-size: 15px;
}

.menu-arrow {
  color: var(--text-muted);
  font-size: 14px;
}

/* ====== 横幅 ====== */
.banner {
  background: linear-gradient(135deg, #8b5a2b, #5a3820);
  border-radius: var(--radius-lg);
  padding: 20px;
  color: var(--text-light);
  margin-bottom: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.banner h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.banner p {
  font-size: 13px;
  opacity: 0.8;
}

/* ====== 成就墙 ====== */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.achievement-item {
  aspect-ratio: 1;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.achievement-item.locked {
  opacity: 0.5;
  filter: grayscale(100%);
}

.achievement-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.achievement-name {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

/* ====== Toast 提示 ====== */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.toast.show { opacity: 1; }

/* ====== 动画 ====== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn { animation: fadeIn 0.3s ease-out; }
.animate-slideUp { animation: slideUp 0.4s ease-out; }
.animate-pulse { animation: pulse 2s infinite; }