/* ===== Reset & Base ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  background: #001a4d; /* 与海报边缘同色，下方留白时自然过渡（如需纯白可改为 #ffffff） */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color: #002266;
}

/* 海报单位变量：1u = 海报宽度的 1%（由 JS 动态写入，兼容不支持 cqw 的浏览器/WebView） */
:root {
  --u: 4px;
}

/* 可滚动容器：海报按屏幕宽度缩放，比屏幕高则滚动，比屏幕矮则下方留白 */
.page {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 海报容器：宽度占满（大屏居中限宽），用图片自身比例撑开高度，
   同时作为热区/按钮的坐标系与容器查询(cqw)基准 —— 各机型等比缩放，尺寸一致 */
.poster-wrap {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  container-type: inline-size;
}

.poster-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 首页 / 证书页：宽度始终 100%，高度由 JS 计算（不足时拉伸填满，最高 1.25 倍；超高则长页滚动） */
.home-page .poster-img,
.cert-page .poster-img {
  height: 100%;
  object-fit: fill;
}

/* ===== 景点热区（坐标基于海报图片，百分比定位，等比缩放） ===== */
.spot {
  position: absolute;
  z-index: 2;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 2.5%;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.spot:active {
  transform: scale(0.98);
  background: rgba(0, 200, 255, 0.12);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.35) inset;
}

.spot.watched {
  background: rgba(0, 255, 170, 0.08);
  box-shadow: 0 0 0 0.6cqw rgba(0, 255, 170, 0.55);
}

.spot.watched::before {
  content: "✓ 已打卡";
  position: absolute;
  right: 3%;
  top: 4%;
  padding: 0.8cqw 2.2cqw;
  border-radius: 10px;
  background: rgba(0, 200, 100, 0.85);
  color: #fff;
  font-size: 2.6cqw;
  font-weight: bold;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

/* 依据主页面.png 实际卡片位置定位（覆盖完整卡片含标题与边框） */
.spot-1 { left: 4%;  top: 24%;  width: 45%; height: 18%; }
.spot-2 { left: 49%; top: 31%;  width: 47%; height: 21%; }
.spot-3 { left: 4%;  top: 43%;  width: 45%; height: 19%; }
.spot-4 { left: 49%; top: 55%;  width: 47%; height: 20%; }
.spot-5 { left: 4%;  top: 68%;  width: 45%; height: 20%; }

/* Debug 模式：在 URL 后加 ?debug 即可显示热区边界和编号，方便真机核对 */
body.debug .spot {
  background: rgba(255, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.85);
}
body.debug .spot::after {
  content: attr(data-code);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 0 3px #000;
  white-space: nowrap;
  pointer-events: none;
}
body.debug .spot.watched {
  background: rgba(0, 255, 170, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.85);
}

/* ===== 领取证书按钮（呼吸灯，尺寸按海报宽度比例，各机型一致） ===== */
.cert-btn {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 52%;                /* 相对海报宽度，等比缩放，避免不同机型大小突兀 */
  transform: translateX(-50%);
  z-index: 10;
  text-decoration: none;
  display: block;
}

.cert-btn img {
  width: 100%;
  display: block;
  animation: breathe 2.2s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.65));
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 22px rgba(0, 230, 255, 0.95)) drop-shadow(0 0 36px rgba(0, 150, 255, 0.55));
  }
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  max-width: 76%;
  padding: 14px 22px;
  border-radius: 10px;
  background: rgba(0, 20, 60, 0.92);
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 100;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ===== 弹框 ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 10, 35, 0.72);
  backdrop-filter: blur(3px);
}

.modal.hidden,
.cert-content.hidden,
.alert-box.hidden {
  display: none !important;
}

.modal-content {
  width: 78%;
  max-width: 340px;
  padding: 26px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f6ff 100%);
  box-shadow: 0 12px 40px rgba(0, 60, 150, 0.35);
  text-align: center;
}

.modal-content h3 {
  margin-bottom: 16px;
  color: #003399;
  font-size: 20px;
  font-weight: 700;
}

.modal-content input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #b3d1ff;
  border-radius: 10px;
  font-size: 17px;
  text-align: center;
  outline: none;
  color: #002266;
  background: #fff;
  transition: border-color 0.2s;
}

.modal-content input:focus {
  border-color: #0066ff;
}

.modal-tip {
  margin-top: 10px;
  color: #5577aa;
  font-size: 13px;
}

.modal-btns {
  margin-top: 18px;
}

.btn-primary {
  width: 100%;
  padding: 13px 0;
  border: none;
  border-radius: 26px;
  background: linear-gradient(90deg, #0099ff 0%, #0066ff 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 100, 255, 0.35);
  transition: transform 0.1s, box-shadow 0.2s;
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 3px 10px rgba(0, 100, 255, 0.25);
}

/* ===== 证书文字内容（坐标基于海报，字号用 cqw 随海报宽度等比缩放） ===== */
.cert-content {
  position: absolute;
  left: 50%;
  top: 26%;
  width: 86%;
  height: 46%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-text {
  width: 100%;
  text-align: center;
  color: #002266;
  padding-top: 3%;
}

.cert-row {
  font-size: 3.2cqw;
  font-weight: 500;
  color: #335599;
  letter-spacing: 2px;
  margin-bottom: 1.5cqw;
}

.cert-name {
  font-size: 9cqw;
  font-weight: 900;
  color: #001a66;
  letter-spacing: 8px;
  margin-bottom: 5cqw;
  text-shadow: 0 2px 0 rgba(0, 60, 150, 0.08);
}

.cert-desc {
  font-size: 3.2cqw;
  color: #335599;
  line-height: 1.8;
  margin-bottom: 1.5cqw;
}

.cert-desc .highlight {
  display: inline-block;
  min-width: 5cqw;
  color: #ff6600;
  font-size: 5cqw;
  font-weight: 800;
  margin: 0 0.6cqw;
}

.cert-thanks {
  font-size: 3.2cqw;
  color: #335599;
  line-height: 1.8;
  margin-bottom: 1.5cqw;
}

.cert-award {
  font-size: 3.4cqw;
  font-weight: 700;
  color: #002266;
  margin-top: 2.5cqw;
}

/* ===== 提示框 ===== */
.alert-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 78%;
  padding: 18px 26px;
  border-radius: 12px;
  background: rgba(0, 30, 90, 0.94);
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  z-index: 60;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* 桌面端：海报限宽居中，文字仍按海报宽度等比缩放 */
@media (min-width: 768px) {
  .poster-wrap {
    max-width: 480px;
  }
}