/* ===================================================================
   长江路互动拍照 H5
   目标屏 1080 x 1920。设计稿 1600x2848 已按 0.675 换算。
   按钮坐标由脚本从设计稿描边实测得出，误差 ±2px。
   =================================================================== */

:root {
  --dw: 1080;
  --dh: 1920;
  --scale: 1;
  --ink: #5a2318;          /* 描边深棕 */
  --ink-soft: #8a4a34;
  --paper: #f6f1e6;        /* 纸感米白 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #1a1512;
  overflow: hidden;
  font-family: "STKaiti", "KaiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

.stage {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--dw) * 1px);
  height: calc(var(--dh) * 1px);
  transform: translate(-50%, -50%) scale(var(--scale));
  transform-origin: center center;
  overflow: hidden;
  background: var(--paper);
}

/* ---------- 页面 ---------- */
.screen {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
}
.screen.is-active { opacity: 1; visibility: visible; }

/* 全部背景改用 WebP，从 3.6MB 降至 613KB */
.screen--start   {
  background-color: var(--paper);
  background-image: url("../assets/img/bg-start.webp");
}
.screen--capture {
  background-color: var(--paper);
  background-image: url("../assets/img/bg-capture.webp");
}
.screen--loading {
  background-color: var(--paper);
  background-image: url("../assets/img/bg-base.webp");
}
.screen--done {
  background-color: var(--paper);
  background-image: url("../assets/img/bg-done.webp");
}

/* ===================================================================
   热区：贴在背景图已画好的按钮上，本身透明
   坐标 = 脚本实测值（1080 基准）
   =================================================================== */
.hit {
  position: absolute;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  border-radius: 86px;
  transition: transform .12s ease, background-color .2s ease;
}
.hit:active {
  transform: scale(.97);
  background: rgba(90, 35, 24, .10);
}
.hit:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }
.hit[disabled] { pointer-events: none; opacity: .5; }

/* 首页「点击进入」 */
.hit--enter  { left: 297px; top: 1370px; width: 492px; height: 171px; }
/* 拍照页「开始拍照」 */
.hit--shoot  { left: 288px; top: 1590px; width: 492px; height: 171px; }
/* 完成页「上传云端」 */
.hit--cloud  { left: 232px; top: 1140px; width: 608px; height: 172px; border-radius: 40px; }
/* 完成页「打印照片」 */
.hit--print  { left: 236px; top: 1340px; width: 608px; height: 172px; border-radius: 40px; }
/* 完成页「打印冰箱贴」 */
.hit--fridge { left: 236px; top: 1526px; width: 608px; height: 172px; border-radius: 40px; }
.hit--cloud img,
.hit--print img,
.hit--fridge img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* 调试：?debug=1 显示热区 */
.debug .hit { background: rgba(255, 0, 80, .25); outline: 2px dashed #ff0050; }

/* 首页按钮呼吸提示 */
.hit--enter::after {
  content: "";
  position: absolute; inset: -6px;
  border: 3px solid rgba(90, 35, 24, .5);
  border-radius: 90px;
  opacity: 0;
  animation: breathe 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { opacity: 0; transform: scale(.98); }
  50%      { opacity: .9; transform: scale(1.02); }
}

/* ===================================================================
   浮层小按钮（背景图里没有，做成描边风格贴合整体调性）
   =================================================================== */
.chip {
  position: absolute;
  top: 1250px; left: 60px;
  height: 84px;
  padding: 0 40px;
  border: 3px solid var(--ink);
  border-radius: 42px;
  background: rgba(246, 241, 230, .88);
  color: var(--ink);
  font-size: 34px;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s ease;
}
.chip:active { transform: scale(.95); }
.chip--right { left: auto; right: 60px; }
.chip--home {
  top: 1720px; left: 50%;
  transform: translateX(-50%);
}
.chip--home:active { transform: translateX(-50%) scale(.95); }
.chip--back {
  top: 1720px; left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.85);
  border-color: var(--ink);
  z-index: 10;
}
.chip--back:active { transform: translateX(-50%) scale(.95); }

/* 设备主页小房子按钮 */
.btn-device-home {
  position: absolute;
  top: 40px; right: 40px;
  width: 72px; height: 72px;
  border: 3px solid rgba(90,35,24,.5);
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: transform .12s ease, background .15s ease;
}
.btn-device-home:active {
  transform: scale(.9);
  background: rgba(255,255,255,.95);
}
.file-input { display: none; }

/* ===================================================================
   2 取景 / 预览区
   位于标题下方、按钮上方的胶片留白区
   =================================================================== */
.view-box {
  position: absolute;
  left: 140px; top: 330px;
  width: 800px; height: 800px;
  border: 6px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: #241d18;
  box-shadow: 0 12px 40px rgba(90, 35, 24, .3);
}
#video, .pick-preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
#video.is-mirror { transform: scaleX(-1); }
.pick-preview { display: none; z-index: 2; }
.pick-preview.is-on { display: block; }

.view-mask {
  position: absolute; inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  background: #241d18;
  color: rgba(246, 241, 230, .8);
  font-size: 38px;
  line-height: 1.7;
  text-align: center;
  white-space: pre-line;
  transition: opacity .3s ease;
}
.view-mask.is-off { opacity: 0; pointer-events: none; }

/* 倒计时 */
.countdown {
  position: absolute; inset: 0;
  z-index: 5;
  display: none;
  align-items: center; justify-content: center;
  font-size: 280px;
  font-weight: 700;
  color: var(--paper);
  text-shadow: 0 0 30px rgba(0, 0, 0, .6);
  background: rgba(36, 29, 24, .3);
}
.countdown.is-on { display: flex; }
.countdown span { animation: pop .9s ease-out; }
@keyframes pop {
  0%   { transform: scale(.4); opacity: 0; }
  35%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: .92; }
}

.flash {
  position: absolute; inset: 0;
  z-index: 6;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.flash.is-on { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* ===================================================================
   3 合成中
   =================================================================== */
.loading-box {
  position: absolute;
  left: 0; right: 0; top: 430px;
  text-align: center;
  color: var(--ink);
}
.loading-thumb {
  width: 300px; height: 380px;
  margin: 0 auto 56px;
  border: 4px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  background: #241d18;
  box-shadow: 0 14px 40px rgba(90, 35, 24, .28);
}
.loading-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(.35) saturate(.85);
}
.spinner {
  width: 96px; height: 96px;
  margin: 0 auto 40px;
  border: 9px solid rgba(90, 35, 24, .22);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 54px; letter-spacing: 4px; }
.dots::after { content: ""; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots {
  0% { content: ""; } 25% { content: "."; }
  50% { content: ".."; } 75% { content: "..."; }
}
.progress {
  width: 600px; height: 14px;
  margin: 40px auto 0;
  border-radius: 7px;
  background: rgba(90, 35, 24, .18);
  overflow: hidden;
}
.progress__bar {
  width: 0; height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--ink), var(--ink-soft));
  transition: width .4s ease;
}
/* 预计等待提示：gemini-3-pro 实测端到端 28~29s，写 30 秒。 */
.loading-eta {
  margin-top: 34px;
  font-size: 38px;
  color: var(--ink);
  letter-spacing: 3px;
}
.loading-tip {
  margin-top: 18px;
  font-size: 34px;
  color: var(--ink-soft);
  letter-spacing: 3px;
}

/* ===================================================================
   4 结果图 —— 新版完成页：转绘完成标题已烤入背景
   图片居中展示，下方三个操作按钮
   =================================================================== */
.result-box {
  position: absolute;
  left: 50%; top: 260px;
  transform: translateX(-50%);
  width: 540px; height: 810px;
  border: 6px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: #241d18;
  box-shadow: 0 16px 46px rgba(90, 35, 24, .3);
}
#resultImg {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  animation: fadeUp .6s ease-out;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   弹窗
   =================================================================== */
.modal {
  position: absolute; inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 29, 24, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.modal.is-on { opacity: 1; visibility: visible; }
.modal__panel {
  width: 800px;
  padding: 64px 60px 56px;
  border: 5px solid var(--ink);
  border-radius: 32px;
  background: var(--paper);
  text-align: center;
  color: var(--ink);
  transform: translateY(24px);
  transition: transform .3s ease;
}
.modal.is-on .modal__panel { transform: translateY(0); }
.modal__title {
  font-size: 62px;
  letter-spacing: 8px;
  font-weight: 700;
}
.modal__qr {
  width: 340px; height: 340px;
  margin: 40px auto;
  border: 4px solid var(--ink);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}
.modal__qr-inner {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0/40px 40px;
  color: var(--ink);
  font-size: 30px;
  border-radius: 8px;
}
.modal__qr-inner img { width: 100%; height: 100%; display: block; border-radius: 8px; }
.modal__tip {
  font-size: 34px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.modal__tip--lead { margin-top: 20px; }
.modal__ops {
  margin-top: 48px;
  display: flex;
  gap: 32px;
  justify-content: center;
}
.mbtn {
  min-width: 240px;
  height: 108px;
  border: 4px solid var(--ink);
  border-radius: 54px;
  background: transparent;
  color: var(--ink);
  font-size: 42px;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s ease;
}
.mbtn:active { transform: scale(.95); }
.mbtn--ok { background: var(--ink); color: var(--paper); }

/* ---------- Toast ---------- */
.toast {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translate(-50%, -50%);
  z-index: 90;
  max-width: 820px;
  padding: 32px 48px;
  border-radius: 18px;
  background: rgba(36, 29, 24, .9);
  color: var(--paper);
  font-size: 36px;
  line-height: 1.6;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.toast.is-on { opacity: 1; visibility: visible; }

/* 打印等待提示固定在页面顶部，不覆盖成品照片。 */
.print-wait-notice {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  z-index: 91;
  width: min(820px, calc(100% - 80px));
  box-sizing: border-box;
  padding: 24px 36px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: rgba(255, 249, 239, .96);
  color: var(--ink);
  font-size: 34px;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease;
}
.print-wait-notice.is-on { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .toast, .print-wait-notice, .progress__bar, .modal { transition: none; }
  .spinner, .countdown span, .dots::after, #resultImg,
  .flash, .hit--enter::after { animation: none; }
}

/* 打印确认弹窗内的照片预览（替代原支付二维码位） */
.modal__pic {
  width: 300px; height: 380px;
  margin: 36px auto 32px;
  border: 4px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: #241d18;
}
.modal__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 完成页：性别纠正条 ---------- */
.fixbar {
  position: absolute;
  left: 50%;
  top: 1160px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(58, 38, 26, .58);
  backdrop-filter: blur(4px);
  z-index: 6;
}
.fixbar__label {
  font-size: 26px;
  color: #f4e6d2;
  letter-spacing: 1px;
}
.fixbar__btn {
  padding: 10px 22px;
  font-size: 26px;
  color: #4a2f1c;
  background: #f0dcc0;
  border: 2px solid #8a5a33;
  border-radius: 999px;
  cursor: pointer;
}
.fixbar__btn:active {
  transform: translateY(2px);
  background: #e2c9a5;
}

/* ===================================================================
   2 背景选择页
   =================================================================== */
.screen--select-bg {
  background-image: url("../assets/img/bg-base.webp");
}

.bg-selector {
  position: absolute;
  /* 居中放置，不偏移 */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 740px;
  text-align: center;
}

.bg-selector__title {
  font-size: 52px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 4px;
  margin-bottom: 20px;
  white-space: nowrap;
}

.bg-selector__list {
  /* 9 张背景按 3行3列排；flex 会把全部挤进一行，
     图被压成细条，所以用 grid 固定三列。 */
  display: grid;
  /* minmax(0, 1fr) 而不是 1fr：1fr 等于 minmax(auto, 1fr)，
     列宽会被 nowrap 标题的 min-content 撑开，
     使第三列溢出到舞台外。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  justify-items: center;
  align-items: start;
}

.bg-option {
  width: 100%;
  /* 配合 minmax(0, 1fr)，避免子元素反向撑宽网格道 */
  min-width: 0;
  cursor: pointer;
  transition: transform .2s ease;
}

.bg-option:hover {
  transform: translateY(-10px);
}

.bg-option:active {
  transform: translateY(-5px) scale(.98);
}

.bg-option__preview {
  width: 100%;
  /* 卡片比例 3:4，比 2:3 更矮，9张能全部塞进屏 */
  aspect-ratio: 3 / 4;
  height: auto;
  border: 5px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: #241d18;
  box-shadow: 0 10px 30px rgba(90, 35, 24, .3);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.bg-option:hover .bg-option__preview {
  box-shadow: 0 16px 50px rgba(90, 35, 24, .45);
  border-color: var(--ink-soft);
}

.bg-option__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bg-option__name {
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: 0;
  height: 52px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

/* 上传照片按钮样式 */
.chip--upload {
  top: 1180px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(138, 74, 52, .92);
  color: var(--paper);
  border-color: var(--ink);
}
.chip--upload:active {
  transform: translateX(-50%) scale(.95);
}

/* 上传照片按钮放大版 */
.chip--upload-large {
  height: 120px;
  padding: 0 60px;
  font-size: 48px;
  font-weight: 700;
  border-width: 4px;
  letter-spacing: 4px;
  box-shadow: 0 8px 24px rgba(90, 35, 24, .35);
}
.chip--upload-large:hover {
  transform: translateX(-50%) translateY(-4px);
  box-shadow: 0 12px 32px rgba(90, 35, 24, .45);
}
.chip--upload-large:active {
  transform: translateX(-50%) scale(.96);
}

/* ===================================================================
   拍照页按钮重叠修复
   .chip--back 原为 top:1720px，与 .hit--shoot（1590~1761px）
   纵向重叠 41px，水平也在其 288~780px 范围内。
   .chip--back 带 z-index:10，会盖在「开始拍照」热区之上，
   用户点到重叠区就变成「重选背景」。
   下移到拍照热区下沿之外，彻底分开。
   =================================================================== */
.screen--capture .chip--back { top: 1790px; }