/* 公园寻宝（网页版 H5）—— 移动端优先，观感与小程序版保持一致（绿色主题） */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #f4f7f5;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1f2a24;
  -webkit-tap-highlight-color: transparent;
}

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 14px 28px;
}

.header {
  text-align: center;
  margin: 10px 0 16px;
}

.title {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
}

.subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #5a6b61;
}

/* 演示模式条 */
.demo-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff8e6;
  border: 2px dashed #d9a441;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.demo-label {
  font-size: 15px;
  font-weight: 600;
}

.demo-switch {
  width: 26px;
  height: 26px;
  accent-color: #1d7a4f;
}

.demo-hint {
  font-size: 13px;
  color: #8a6d1f;
  width: 100%;
}

/* 卡片 */
.card {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(20, 60, 40, 0.08);
}

.center {
  text-align: center;
}

.big-emoji {
  font-size: 52px;
  margin-bottom: 10px;
}

.intro-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
}

.intro-text {
  font-size: 15px;
  line-height: 1.6;
  color: #42524a;
  margin: 0 0 18px;
}

/* 按钮：最小点击高度 52px，竖屏单手好按 */
.btn-primary,
.btn-secondary,
.btn-demo {
  display: block;
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 999px;
  font-size: 18px;
  cursor: pointer;
  padding: 10px 16px;
}

.btn-primary {
  background: #1d7a4f;
  color: #ffffff;
  font-weight: 600;
}

.btn-primary:active {
  background: #16603d;
}

.btn-secondary {
  background: #eef3f0;
  color: #1d7a4f;
  font-size: 16px;
}

.btn-demo {
  background: #d9a441;
  color: #ffffff;
  font-size: 16px;
}

.tip-text {
  margin: 12px 0 0;
  font-size: 13px;
  color: #7a8a80;
  line-height: 1.5;
}

.https-note {
  color: #b07d2b;
}

/* 进度 */
.progress-text {
  font-size: 19px;
  font-weight: 700;
}

.progress-sub {
  margin-top: 5px;
  font-size: 14px;
  color: #5a6b61;
}

.progress-track {
  margin-top: 12px;
  height: 8px;
  background: #e6ede9;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #1d7a4f;
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* 距离大字 */
.distance-label {
  font-size: 15px;
  color: #5a6b61;
}

.distance-big {
  font-size: 64px;
  font-weight: 800;
  color: #1d7a4f;
  line-height: 1.25;
  word-break: break-all;
}

.trend {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}

.trend-hot {
  color: #d95d1e;
}

.trend-cold {
  color: #2b6cb0;
}

.demo-area {
  margin-top: 16px;
}

/* 错误卡片 */
.error-card {
  background: #fff1f1;
  border: 2px solid #e5a3a3;
}

.error-text {
  font-size: 15px;
  line-height: 1.6;
  color: #8c2f2f;
  margin: 0 0 14px;
}

/* 题目卡片 */
.question-card {
  border: 3px solid #1d7a4f;
}

.arrival-tip {
  font-size: 15px;
  color: #1d7a4f;
  margin: 0 0 10px;
}

.question-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 14px;
}

.option {
  display: block;
  width: 100%;
  min-height: 52px;
  text-align: left;
  border: 2px solid #d7e0da;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.5;
  background: #fafcfa;
  color: #1f2a24;
  cursor: pointer;
}

.option-selected {
  border-color: #1d7a4f;
  background: #e7f4ec;
  font-weight: 600;
}

.feedback {
  font-size: 15px;
  color: #c53030;
  margin: 4px 0 12px;
}

/* 完成页 */
.finish-stat {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
}

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  background: rgba(20, 40, 30, 0.92);
  color: #fff;
  font-size: 16px;
  padding: 12px 22px;
  border-radius: 999px;
  z-index: 99;
  white-space: nowrap;
}

.footer {
  text-align: center;
  font-size: 12px;
  color: #93a399;
  padding: 6px 10px 16px;
  line-height: 1.6;
}