/* ===================================================================
   长江路互动拍照 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），其余由 app.js 懒加载 */
.screen--start   { background-image: url("../assets/img/bg-start.webp"); }
.screen--capture { }
.screen--loading { }
.screen--done    { }

/* ===================================================================
   热区：贴在背景图已画好的按钮上，本身透明
   坐标 = 脚本实测值（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--print  { left: 289px; top: 1308px; width: 491px; height: 171px; }
/* 完成页「免费上传」 */
.hit--upload { left: 288px; top: 1574px; width: 492px; height: 171px; }

/* 调试：?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: 1790px; left: 50%;
  transform: translateX(-50%);
}
.chip--home:active { transform: translateX(-50%) scale(.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;
}
.loading-tip {
  margin-top: 30px;
  font-size: 34px;
  color: var(--ink-soft);
  letter-spacing: 3px;
}

/* ===================================================================
   4 结果图
   =================================================================== */
.result-box {
  position: absolute;
  left: 200px; top: 230px;
  width: 680px; height: 1020px;
  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: 960px;
  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; }

@media (prefers-reduced-motion: reduce) {
  .screen, .toast, .progress__bar, .modal, .modal__panel { 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%);
  /* 舞台设计尺寸是 1080x1920，容器不能超过 1080 */
  width: 940px;
  text-align: center;
}

.bg-selector__title {
  font-size: 68px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 6px;
  margin-bottom: 48px;
  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: 36px 44px;
  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%;
  /* 三行一共要装进屏，单格高度从 480 降下来；
     2:3 比例跟成品一致。 */
  aspect-ratio: 2 / 3;
  height: auto;
  border: 6px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  background: #241d18;
  box-shadow: 0 12px 40px 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: 18px;
  font-size: 26px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: 0;
  /* 列宽只有 284px，长地标名单行装不下。
     改为最多两行，比 ellipsis 截掉信息量大。
     固定两行高保证三行图排列齐。 */
  height: 70px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-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);
}