/*
  文件：styles/style.css
  用途：湿气程度自测 H5 单页应用的整体样式定义
  说明：
    - 采用中式养生的莫兰迪绿 + 暖米色配色
    - 使用圆角卡片、适当阴影、充足留白
    - 大量中文注释，方便前端初学者理解每一块样式的作用
*/

/* ========== 全局基础样式重置与通用设置 ========== */

/* 使用通配选择器对常见元素进行简单重置，去掉默认的 margin / padding */
*,
*::before,
*::after {
  box-sizing: border-box; /* 所有元素使用 border-box 模型，方便控制宽高 */
}

html,
body {
  margin: 0; /* 去除浏览器默认外边距 */
  padding: 0; /* 去除浏览器默认内边距 */
  height: 100%; /* 让 body 至少占满一屏高度，便于背景铺满 */
}

body {
  /* 设置整体背景色：暖米色，营造柔和的养生氛围 */
  background: #f6f2ea;
  /* 设置全局字体为略带国风感的宋体/仿宋系字体，整体偏柔和 */
  font-family: var(--font-body);
  color: #444444; /* 全局文字默认颜色：深灰色，阅读舒适 */
  -webkit-font-smoothing: antialiased; /* 提升字体在 WebKit 内核上的渲染效果 */
}

/* ========== CSS 变量：统一管理颜色、字体与阴影等风格 ========== */

:root {
  /* 品牌主标题专用字体：更有国风、书法感，略强烈一些 */
  --font-brand: "STKaiti", "KaiTi", "DFKai-SB", "FZYaoti",
    "Songti SC", "SimSun", serif;

  /* 页面正文与其它文字字体：带一点国风气质但更柔和，不与品牌字体相同 */
  --font-body: "Songti SC", "STSong", "FangSong", "PingFang SC",
    "Microsoft YaHei", serif;

  /* 主色：莫兰迪绿色，用于主按钮、标题强调等 */
  --color-primary: #6f9c8f;
  /* 主色的深一点版本：用于 hover 状态或强调 */
  --color-primary-dark: #567a71;
  /* 主色的浅一点版本：用于背景块或淡色区域 */
  --color-primary-light: #c5d8d1;

  /* 警示色：中度湿气用橙色 */
  --color-medium: #e6a15a;
  /* 警示色：重度湿气用红色 */
  --color-heavy: #d95c4d;

  /* 背景米色：页面主背景 */
  --color-bg: #f6f2ea;
  /* 卡片背景色：稍偏白，拉出卡片层次 */
  --color-card-bg: #ffffff;

  /* 常用文字颜色 */
  --color-text-main: #444444;
  --color-text-subtle: #777777;
  --color-text-light: #999999;

  /* 边框和分割线颜色 */
  --color-border-subtle: #e4ddd0;

  /* 阴影：用于卡片轻微浮起的效果，营造温和的立体感 */
  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.06);

  /* 圆角半径：卡片和按钮统一的圆角值 */
  --radius-card: 18px;
  --radius-button: 999px; /* 按钮使用大圆角，类似胶囊形状 */

  /* 动画过渡时间：统一控制交互动效速度 */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* ========== 外层应用容器与整体布局 ========== */

.app {
  /* 限制主体内容的最大宽度，避免在大屏上文字过宽导致阅读困难 */
  max-width: 640px;
  margin: 0 auto; /* 水平居中显示 */
  min-height: 100vh; /* 至少占满整屏高度 */

  /* 为整个应用添加左右内边距，防止内容贴边 */
  padding: 16px 16px 80px; /* 下方留出空间给底部版权信息 */
  display: flex;
  flex-direction: column; /* 头部、主体、底部垂直排列 */
}

/* 顶部头部区域样式 */
.page-header {
  padding: 12px 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand {
  text-align: center; /* 居中标题与副标题 */
}

.brand-main {
  display: block;
  font-size: 20px;
  letter-spacing: 0.12em; /* 加大字间距，营造“手写题签”感 */
  color: var(--color-primary-dark);
  font-weight: 700;
  font-family: var(--font-brand); /* 使用更有国风笔触感的品牌字体 */
}

.brand-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* 主体区域：使用 flex:1 占据尽量多的垂直空间，保证底部版权在页面底部附近 */
.page-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px; /* 各视图之间预留合理间距 */
}

/* 统一的卡片样式：用于首页说明卡片、答题卡片、结果卡片等 */
.card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  padding: 20px 18px 22px;
  box-shadow: var(--shadow-soft);
}

/* ========== 按钮通用样式 ========== */

.btn {
  /* 清除原生按钮的边框和背景 */
  border: none;
  outline: none;
  background: transparent;

  /* 文字基础样式 */
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-main);

  /* 内外边距与对齐 */
  padding: 10px 18px;
  border-radius: var(--radius-button);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 动画过渡：让 hover / active 更自然 */
  transition: background-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast), border-color var(--transition-fast);
}

/* 主按钮：用于“开始测试”、“查看结果”、“获取调理方案”等重要操作 */
.btn--primary {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(93, 134, 121, 0.32);
}

.btn--primary:hover {
  /* hover 时略微变深并增加阴影，实现轻微“浮起感” */
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(86, 122, 113, 0.4);
}

.btn--primary:active {
  /* active 时微微下沉，模拟按压效果 */
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(86, 122, 113, 0.3);
}

/* 次按钮（轮廓按钮）：用于“保存图片”等次要但仍重要的操作 */
.btn--outline {
  border: 1px solid var(--color-primary);
  color: var(--color-primary-dark);
  background-color: #ffffff;
}

.btn--outline:hover {
  background-color: var(--color-primary-light);
}

.btn--outline:active {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* 朴素按钮：用于“上一题”、“重新测试”等不需要太高视觉权重的按钮 */
.btn--ghost {
  background-color: transparent;
  color: var(--color-primary-dark);
}

.btn--ghost:hover {
  background-color: rgba(111, 156, 143, 0.08);
}

.btn--ghost:active {
  background-color: rgba(111, 156, 143, 0.16);
}

/* 宽度铺满父容器的按钮：常用于底部的主操作 */
.btn--full {
  width: 100%;
}

/* 禁用状态按钮：降低透明度，并禁止点击 */
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* ========== 视图切换与动画（首页 / 答题 / 结果） ========== */

.view {
  display: none; /* 默认所有视图不显示，避免互相干扰 */
  animation: fadeInUp var(--transition-normal); /* 进入时的淡入上移动画 */
}

.view--active {
  display: block; /* 当前激活视图显示 */
}

/* 淡入上移动画：增强切屏时的灵动感 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 首页 / 欢迎页样式 ========== */

.home-card {
  text-align: left; /* 标题和正文从左对齐，更符合阅读习惯 */
}

.home-title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.4;
  color: var(--color-primary-dark);
  text-align: center; /* 首页主标题居中，视觉更聚焦 */
}

.home-subtitle {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-subtle);
  text-align: center; /* 副标题两行居中显示，更美观 */
}

.home-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-main);
  text-align: left;
}

.home-description p {
  margin: 4px 0;
}

.home-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 首页分数说明的小字提示样式 */
.home-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-subtle);
  text-align: center;
}

/* ========== 答题页样式 ========== */

.quiz-card {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 头部、题目区、底部之间的间距 */
}

.quiz-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-progress-text {
  font-size: 13px;
  color: var(--color-text-subtle);
}

/* 进度条外框：浅色背景的长条形 */
.progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background-color: #ebe4d8;
  overflow: hidden; /* 隐藏内部进度条超出部分，保证圆角效果 */
}

/* 实际的绿色进度条，宽度由 JS 控制 */
.progress-bar__inner {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(
    to right,
    var(--color-primary),
    var(--color-primary-light)
  );
  transition: width 0.3s ease; /* 宽度变化时做平滑动画 */
}

.question-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.question-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text-main);
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 选项间垂直间距 */
}

/* 单个选项按钮：使用浅色底 + 圆角卡片风格 */
.option-btn {
  width: 100%;
  justify-content: flex-start; /* 文本从左侧开始，符合阅读习惯 */
  font-size: 14px;
  background-color: #f7f3ec;
  border-radius: 999px;
  color: var(--color-text-main);
}

.option-btn:hover {
  background-color: #efe4d2;
}

.option-btn:active {
  background-color: #e4d5c0;
}

/* 已选中的选项：使用主色背景 + 白色文字突出显示 */
.option-btn--selected {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  color: #ffffff;
}

/* 题目切换时的简易动画：向上淡入，增强用户对切题动作的感知 */
.question-animate {
  animation: questionFadeIn 0.3s ease;
}

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

.quiz-footer {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

/* 当“上一题”与“查看结果”两个按钮同时出现时，让它们合理分配宽度 */
.quiz-footer .btn {
  flex: 1;
}

/* ========== 结果页样式 ========== */

.result-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.result-header {
  text-align: center;
}

.result-title {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--color-primary-dark);
}

.result-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.result-score-number {
  font-size: 32px;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.result-score-unit {
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* 环形进度条整体容器：水平垂直居中显示 */
.result-gauge {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
}

/* SVG 自身占满父容器，方便自适应 */
.gauge-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* 旋转 -90 度，使圆环从顶部开始 */
}

/* 圆环的基础样式：去掉填充色，只保留描边 */
.gauge-circle {
  fill: none;
  stroke-width: 10;
}

/* 底层灰色圆环：作为背景 */
.gauge-circle--bg {
  stroke: #e7dfd3;
}

/* 顶层用于展示分数的圆环：默认颜色，会根据程度再叠加其他类 */
.gauge-circle--value {
  stroke-linecap: round; /* 圆环两端使用圆角，让视觉更柔和 */
  stroke: var(--color-primary); /* 默认使用主色，保证有一个初始颜色 */
  transition: stroke 0.3s ease; /* 当程度变化导致颜色变更时做平滑过渡 */
}

/* 轻度湿气对应的圆环颜色：偏暖的绿色 */
.gauge-circle--light {
  stroke: #70a68a;
}

/* 中度湿气对应的圆环颜色：橙色 */
.gauge-circle--medium {
  stroke: var(--color-medium);
}

/* 重度湿气对应的圆环颜色：红色 */
.gauge-circle--heavy {
  stroke: var(--color-heavy);
}

/* 覆盖在圆环中间的百分比文本 */
.gauge-percentage {
  position: absolute;
  inset: 0; /* top/right/bottom/left 全为 0，使其覆盖整个圆区域 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.result-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-main);
}

.result-level-title {
  margin: 0 0 6px;
  font-size: 16px;
  text-align: center; /* 程度标题居中，更像结果小标题 */
}

.result-text {
  margin: 4px 0;
  white-space: normal; /* 使用 HTML 标签控制换行，更灵活 */
}

.result-advice {
  margin-top: 8px;
}

.result-advice-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}

.result-advice-list {
  margin: 0;
  padding-left: 18px; /* 适当缩进，突出列表结构 */
}

.result-advice-list li {
  margin: 4px 0;
}

/* 结果页提示卡片样式 */
.result-tip-container {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.result-tip {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background-color: #f8f3eb;
  border: 1px solid var(--color-border-subtle);
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-main);
}

/* 结果页底部操作按钮区域布局 */
.result-footer {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 保存结果图片预览区域样式 */
.save-image-preview {
  margin-top: 14px;
  padding: 12px 10px;
  border-radius: 12px;
  background-color: #f8f3eb;
}

.save-image-tip {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.save-image-box {
  border-radius: 12px;
  overflow: hidden; /* 隐藏图片四角，形成规则圆角矩形 */
  border: 1px solid var(--color-border-subtle);
}

.save-image {
  width: 100%;
  display: block; /* 让图片独占一行，避免出现多余空隙 */
}

/* ========== 统一底部水印和版权信息样式 ========== */

.page-footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed rgba(180, 164, 136, 0.6);
  font-size: 11px;
  color: var(--color-text-light);
}

.footer-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.footer-label {
  font-weight: 500;
  color: var(--color-text-subtle);
}

.footer-text {
  flex: 1;
}

/* ========== 响应式适配：针对更大屏幕做轻微优化 ========== */

@media (min-width: 480px) {
  .home-title {
    font-size: 26px;
  }

  .question-title {
    font-size: 18px;
  }

  .result-score-number {
    font-size: 36px;
  }

  .gauge-percentage {
    font-size: 24px;
  }
}