/* ============================================================
   全站统一样式配置文件
   说明：
   1. 所有页面（index首页 / rank排行榜 / score历史成绩 / admin后台）
      只需引入这一个 CSS，样式全部统一
   2. 后续只需修改这里，所有页面自动同步生效，无需逐个页面修改
   3. 变量命名规则：
      --font-xxx  字体大小
      --color-xxx 颜色
      --radius-xxx 圆角
      --padding-xxx 内边距
============================================================ */

:root {
  /* ==========================================================
   * 【一、字体大小配置】
   * 控制：所有页面文字大小
   ========================================================== */
  --font-size-h1: 22px;        /* 页面大标题：如“答题游戏” */
  --font-size-h2: 20px;        /* 小标题：如“排行榜”“历史成绩” */
  --font-size-btn: 16px;       /* 所有按钮文字：开始游戏、返回、排行榜等 */
  --font-size-input: 16px;     /* 输入框、下拉选择题库文字 */
  --font-size-title: 18px;     /* 答题页面：题目文字大小 */
  --font-size-option: 18px;    /* 答题页面：四个选项按钮文字 */
  --font-size-normal: 15px;    /* 通用正文：玩家名字、分数 */
  --font-size-small: 14px;     /* 次要文字：所属题库名称 */
  --font-size-tiny: 12px;      /* 最小文字：答题时间、空数据提示 */
  
  /* 👇 👇 新增：【答题 - 正确答案提示专用字号】独立控制 👇 👇 */
  --font-size-answer: 18px;    /* 答错时显示的 ✅ 正确答案 字体大小 */

  /* ==========================================================
   * 【二、颜色配置】
   * 控制：所有页面背景、按钮、文字、答对答错颜色
   ========================================================== */
  --color-bg: #f4f7fa;         /* 全局页面底色（所有页面背景） */
  --color-card: #ffffff;       /* 白色卡片底色（所有模块面板） */
  --color-primary: #4263e6;    /* 主色：按钮、返回键背景色 */
  --color-text: #333333;       /* 主要文字颜色（标题、名字） */
  --color-text-secondary: #666;/* 次要文字颜色（题库名称） */
  --color-text-gray: #999;      /* 灰色提示（时间、暂无成绩） */
  --color-score: red;           /* 分数颜色（红色突出） */
  --color-correct: #d4f8d4;    /* 答题正确时选项背景色 */
  --color-wrong: #ffe5e5;       /* 答题错误时选项背景色 */

  /* ==========================================================
   * 【三、圆角 & 间距配置】
   * 控制：卡片、按钮、输入框的圆润度与内边距
   ========================================================== */
  --radius-card: 20px;         /* 所有卡片圆角（首页、排行榜、成绩） */
  --radius-btn: 16px;          /* 所有按钮圆角 */
  --radius-input: 16px;        /* 昵称输入框、下拉框圆角 */
  --radius-option: 14px;       /* 答题选项按钮圆角 */

  --padding-card: 24px;        /* 卡片内部四周空白 */
  --padding-btn: 16px;         /* 按钮内部上下空白 */
  --padding-input: 16px 18px;  /* 输入框内部上下、左右空白 */
}

/* ==========================================================
 * 【四、全局基础样式】
 * 作用：统一页面默认样式，清除浏览器自带边距
 ========================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--color-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--color-text);
  line-height: 1.4;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height: 100vh;
  max-width: 500px;
  margin: 0 auto;
  overflow-x: hidden;
}

/* ==========================================================
 * 【五、卡片面板通用样式】
 ========================================================== */
.card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: var(--padding-card);
  margin: 12px auto;
  width: calc(100% - 24px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ==========================================================
 * 【六、标题通用样式】
 ========================================================== */
h1, .h1 {
  font-size: var(--font-size-h1);
  margin-bottom: 16px;
}
h2, .h2 {
  font-size: var(--font-size-h2);
  margin-bottom: 14px;
}

/* ==========================================================
 * 【七、按钮通用样式】
 ========================================================== */
.btn, .back-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  padding: var(--padding-btn);
  font-size: var(--font-size-btn);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  margin: 8px 0;
  cursor: pointer;
}

/* ==========================================================
 * 【八、输入框 & 下拉框通用样式】
 ========================================================== */
input, select {
  width: 100%;
  padding: var(--padding-input);
  border-radius: var(--radius-input);
  border: 1px solid #e1e4e8;
  background: #fafbfc;
  font-size: var(--font-size-input);
  outline: none;
  margin-bottom: 12px;
}

/* ==========================================================
 * 【九、答题页面选项样式】
 ========================================================== */
.opt {
  background: #f1f3f9;
  padding: var(--padding-btn);
  border-radius: var(--radius-option);
  margin: 10px 0;
  text-align: center;
  font-size: var(--font-size-option);
}
.opt.correct { background: var(--color-correct); }
.opt.wrong   { background: var(--color-wrong); }

/* ==========================================================
 * 【十、答题正确答案提示（已修复ID匹配 + 调用专用变量）】
 * 作用：答错题目后显示“✅ 正确答案：xxx”
 ========================================================== */
#correctTip {
  color: green;               /* 文字颜色 */
  font-weight: bold;          /* 文字加粗 */
  font-size: var(--font-size-answer);  /* 调用专用答案字号 */
  margin-top: 10px;           /* 距离上方选项间距 */
  text-align: center;         /* 文字居中 */
}

/* ==========================================================
 * 【十一、排行榜 & 历史成绩列表条目通用样式】
 ========================================================== */
.list-item {
  padding: 14px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-normal);
}
.item-name { font-weight: 500; }
.item-score {
  color: var(--color-score);
  font-weight: bold;
  font-size: var(--font-size-normal);
}
.item-bank {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.item-time {
  font-size: var(--font-size-tiny);
  color: var(--color-text-gray);
  margin-top: 4px;
}

/* ==========================================================
 * 【十二、空数据提示】
 ========================================================== */
.empty-tip {
  padding: 30px 0;
  text-align: center;
  color: var(--color-text-gray);
  font-size: var(--font-size-normal);
}

/* ==========================================================
 * 【十三、排行榜前三名高亮样式】
 ========================================================== */
.rank1 { color: #ff9800; font-size: 16px; }
.rank2 { color: #795548; }
.rank3 { color: #009688; }

/* ==========================================================
 * 【十四、后台管理页专用样式（admin.php）统一美化
 * 作用：输入框、文本域、按钮、排版统一美化
========================================================== */
.admin-wrap {
  padding: 20px 0;
}
.admin-wrap h1,
.admin-wrap h2,
.admin-wrap h3 {
  margin-bottom: 16px;
  font-size: var(--font-size-h2);
}

/* 后台统一输入框样式 */
.admin-wrap input[type="text"],
.admin-wrap input[type="number"],
.admin-wrap textarea,
.admin-wrap select {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: var(--radius-input);
  font-size: var(--font-size-input);
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border 0.2s;
}
.admin-wrap input:focus,
.admin-wrap textarea:focus,
.admin-wrap select:focus {
  border-color: var(--color-primary);
}

/* 后台多行输入框（题目、选项等） */
.admin-wrap textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

/* 后台按钮统一美化 */
.admin-wrap button,
.admin-wrap input[type="submit"] {
  display: inline-block;
  padding: 12px 24px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-size: var(--font-size-btn);
  cursor: pointer;
  margin-top: 6px;
}
.admin-wrap button:hover {
  opacity: 0.9;
}

/* 后台模块间距 */
.admin-section {
  margin-bottom: 30px;
}
.admin-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: var(--font-size-normal);
}
/* ==========================================================
 * 【十四、后台管理页专用样式】
========================================================== */
.admin-wrap {
  padding: 10px 0 30px;
}
.admin-section {
  margin-bottom: 20px;
}
.admin-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: var(--font-size-normal);
  color: var(--color-text);
}

.admin-wrap input[type="text"],
.admin-wrap input[type="number"],
.admin-wrap textarea,
.admin-wrap select {
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--radius-input);
  border: 1px solid #e1e4e8;
  background: #fff;
  font-size: var(--font-size-input);
  outline: none;
  box-sizing: border-box;
}
.admin-wrap input:focus,
.admin-wrap textarea:focus,
.admin-wrap select:focus {
  border-color: var(--color-primary);
}

.admin-wrap textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

.admin-wrap button {
  width: 100%;
  padding: var(--padding-btn);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-size: var(--font-size-btn);
  font-weight: 500;
  cursor: pointer;
}