/*
 * AI 掼蛋大师 · Duolingo × Chess.com 融合主题 v2
 * 更圆滑、更友好、更明亮
 */

/* ===== 字体：思源黑体 (全中文覆盖，稳定可靠) ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

/* ===== 全局 ===== */
:root {
  --bg: #131f2e;
  --bg-card: #1a2d42;
  --bg-panel: #1e3350;
  --bg-input: #0f1a28;
  --primary: #58cc02;
  --primary-light: #89e219;
  --gold: #ffc800;
  --cyan: #4dd0e1;
  --red: #ff4b4b;
  --pink: #e91e63;
  --purple: #a78bfa;
  --orange: #ff9800;
  --text: #f0f4f8;
  --text-dim: #8899aa;
  --border: rgba(88, 204, 2, 0.12);
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 4px 20px rgba(0,0,0,0.25);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.35);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.3px;
}

/* 标题加粗 */
h1, h2, h3, .mode-select-title, .boot-title,
.holo-btn .h-name, #boot-start-btn {
  font-family: 'Noto Sans SC', 'PingFang SC', sans-serif !important;
  font-weight: 900 !important;
}

/* VIP按钮不与主题按钮重叠 */
.holo-member-badge {
  right: 120px !important;
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(88,204,2,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(88,204,2,0.4); }

/* ===== Boot 页面 ===== */
#boot {
  background: linear-gradient(160deg, #0f1a28 0%, #1a2d42 50%, #0f1a28 100%) !important;
}

.boot-subtitle {
  color: rgba(88, 204, 2, 0.5) !important;
  font-weight: 400 !important;
  letter-spacing: 6px !important;
}

#boot-start-btn {
  background: linear-gradient(135deg, #58cc02, #46a302) !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-size: 18px !important;
  padding: 16px 64px !important;
  box-shadow: 0 6px 24px rgba(88, 204, 2, 0.35) !important;
  transition: var(--transition) !important;
  border: none !important;
  letter-spacing: 3px !important;
}
#boot-start-btn:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 10px 36px rgba(88, 204, 2, 0.45) !important;
}

#boot-load-bar {
  background: linear-gradient(90deg, #58cc02, #89e219) !important;
}

/* ===== 模式选择页 ===== */
#mode-select {
  background: linear-gradient(160deg, #0f1a28 0%, #162438 50%, #0f1a28 100%) !important;
}

.mode-select-title {
  background: linear-gradient(135deg, #58cc02, #89e219, #ffc800) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 52px !important;
  letter-spacing: 8px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 4px 12px rgba(88,204,2,0.2));
}

.mode-select-sub {
  color: rgba(88, 204, 2, 0.5) !important;
  letter-spacing: 8px !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  margin-top: 8px !important;
}

/* ===== 模型加载条（主页面底部） ===== */
#mode-model-loader {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(0deg, #0f1a28, transparent);
  padding: 20px 40px 30px;
  text-align: center;
  transition: opacity 0.5s;
}
#mode-model-loader.loaded { opacity: 0; pointer-events: none; }
#mode-model-loader .loader-bar {
  height: 8px;
  background: #1e3148;
  border-radius: 4px;
  max-width: 400px;
  margin: 0 auto;
  overflow: hidden;
}
#mode-model-loader .loader-fill {
  height: 100%;
  background: linear-gradient(90deg, #58cc02, #89e219);
  border-radius: 4px;
  transition: width 0.3s;
  width: 0%;
}
#mode-model-loader .loader-text {
  color: #8899aa;
  font-size: 13px;
  margin-bottom: 8px;
}

/* ===== Holo 按钮 — 加厚更有分量 ===== */
.holo-btn {
  background: linear-gradient(145deg, #1e3350, #1a2d42) !important;
  border: 2.5px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px 24px !important;
  transition: var(--transition) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: none !important;
}
.holo-btn::before, .holo-btn::after {
  display: none !important;
}
.holo-btn:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(88, 204, 2, 0.3) !important;
  box-shadow: var(--shadow-hover), 0 0 30px rgba(88, 204, 2, 0.08) !important;
  background: linear-gradient(145deg, #1e3350, #1a2d42) !important;
}

.holo-btn .h-icon {
  font-size: 44px !important;
  margin-bottom: 10px !important;
  filter: none !important;
}

.holo-btn .h-name {
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  color: #f0f4f8 !important;
  text-shadow: none !important;
}

.holo-btn .h-desc {
  font-size: 13px !important;
  color: #8899aa !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
  letter-spacing: 0.5px !important;
}

.holo-btn .h-tag {
  margin-top: 16px !important;
  padding: 10px 24px !important;
  border-radius: 24px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  transition: var(--transition) !important;
}

/* 按钮颜色 */
.holo-btn[data-mode="arena"] .h-name { color: var(--primary) !important; }
.holo-btn[data-mode="arena"] .h-tag {
  background: rgba(88,204,2,0.12) !important;
  color: var(--primary) !important;
  border: 1.5px solid rgba(88,204,2,0.25) !important;
}
.holo-btn[data-mode="review"] .h-name { color: var(--gold) !important; }
.holo-btn[data-mode="review"] .h-tag {
  background: rgba(255,200,0,0.12) !important;
  color: var(--gold) !important;
  border: 1.5px solid rgba(255,200,0,0.25) !important;
}
.holo-btn.arena-btn .h-name { color: var(--pink) !important; }
.holo-btn.arena-btn .h-tag {
  background: rgba(233,30,99,0.12) !important;
  color: var(--pink) !important;
  border: 1.5px solid rgba(233,30,99,0.25) !important;
}
.holo-btn.training-btn .h-name { color: var(--cyan) !important; }
.holo-btn.training-btn .h-tag {
  background: rgba(77,208,225,0.12) !important;
  color: var(--cyan) !important;
  border: 1.5px solid rgba(77,208,225,0.25) !important;
}

/* ===== 用户信息卡片 ===== */
.holo-user-card, .holo-stats {
  background: linear-gradient(145deg, #1a2d42, #162438) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* ===== Lobby ===== */
#lobby .lobby-card {
  background: linear-gradient(145deg, #1a2d42, #162438) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: var(--shadow) !important;
}

.btn-large, #lobby button {
  border-radius: 16px !important;
  font-weight: 700 !important;
  transition: var(--transition) !important;
}

/* ===== 游戏内 ===== */
#training-mode-btn {
  background: rgba(88,204,2,0.12) !important;
  border: 1.5px solid rgba(88,204,2,0.3) !important;
  color: var(--primary) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: var(--transition) !important;
}
#training-mode-btn:hover {
  background: rgba(88,204,2,0.25) !important;
  transform: translateY(-1px) !important;
}

/* 出牌按钮 */
.btn {
  border-radius: 14px !important;
  transition: var(--transition) !important;
}

/* Toast */
.toast {
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}

/* 结果面板 */
.res-box {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
}

/* ===== 测评卡牌 (Arena 深色) ===== */
.quiz-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 65px;
  background: #1a2d42;
  border: 1.5px solid #2d4a66;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.quiz-card .qc-val { font-size: 22px; font-weight: 900; line-height: 1; }
.quiz-card .qc-suit { font-size: 16px; line-height: 1; margin-top: 2px; }
.quiz-card.suit-h .qc-val, .quiz-card.suit-h .qc-suit { color: #ff3b3b; }
.quiz-card.suit-d .qc-val, .quiz-card.suit-d .qc-suit { color: #4488ff; }
.quiz-card.suit-c .qc-val, .quiz-card.suit-c .qc-suit { color: #22cc44; }
.quiz-card.suit-s .qc-val, .quiz-card.suit-s .qc-suit { color: #e0e0e0; }
.quiz-card.suit-jk { background: #3a3000; border-color: #ffc800; }
.quiz-card.suit-jk .qc-val { color: #ffc800; font-size: 13px; }

.quiz-card-sm {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 50px;
  background: #1a2d42;
  border: 1px solid #2d4a66;
  border-radius: 6px;
  margin: 1px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.quiz-card-sm .qc-val { font-size: 16px; font-weight: 900; line-height: 1; }
.quiz-card-sm .qc-suit { font-size: 12px; line-height: 1; margin-top: 1px; }
.quiz-card-sm.suit-h .qc-val, .quiz-card-sm.suit-h .qc-suit { color: #ff3b3b; }
.quiz-card-sm.suit-d .qc-val, .quiz-card-sm.suit-d .qc-suit { color: #4488ff; }
.quiz-card-sm.suit-c .qc-val, .quiz-card-sm.suit-c .qc-suit { color: #22cc44; }
.quiz-card-sm.suit-s .qc-val, .quiz-card-sm.suit-s .qc-suit { color: #e0e0e0; }
.quiz-card-sm.suit-jk { background: #3a3000; border-color: #ffc800; }
.quiz-card-sm.suit-jk .qc-val { color: #ffc800; font-size: 10px; }

/* ===== 亮色主题 ===== */
body.light-theme {
  --bg: #f0f2f5;
  --bg-card: #fff;
  --text: #1a1a2e;
  --text-dim: #666;
}

body.light-theme #mode-select,
body.light-theme #boot {
  background: linear-gradient(160deg, #e8ecf2 0%, #f5f7fa 50%, #e8ecf2 100%) !important;
}

body.light-theme .holo-btn {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
body.light-theme .holo-btn:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important;
  border-color: rgba(88,204,2,0.3) !important;
}
body.light-theme .holo-btn .h-name { color: #1a1a2e !important; }
body.light-theme .holo-btn .h-desc { color: #888 !important; }

body.light-theme .mode-select-title {
  background: linear-gradient(135deg, #2d8a00, #58cc02) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.light-theme .lobby-card,
body.light-theme .holo-user-card {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
}

body.light-theme #boot-start-btn {
  color: #fff !important;
}

body.light-theme .quiz-card {
  background: #f0f2f5;
  border-color: #ccc;
}
body.light-theme .quiz-card.suit-s .qc-val,
body.light-theme .quiz-card.suit-s .qc-suit { color: #222; }

/* 隐藏ELO */
.holo-elo-display, #elo-display, [class*="elo-badge"], .elo-hud {
  display: none !important;
}

/* 蛋力放左上角 */
#egg-token-btn {
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 100 !important;
  padding: 10px 20px !important;
  font-size: 16px !important;
}
#egg-token-btn #egg-token-display {
  font-size: 18px !important;
}
/* VIP + 暗色 放右上角，间距拉开 */
.holo-member-badge {
  position: fixed !important;
  top: 16px !important;
  right: 80px !important;
  z-index: 100 !important;
}
/* 暗色切换放右下角 */
#theme-toggle {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  z-index: 100 !important;
}