/* ==========================================================================
   屏2 · 周边展示 / 屏3 · 登记表单 / 登记弹窗
   ========================================================================== */

/* -------- 返回按钮（屏2、屏3 共用） -------- */

.back {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background-color 0.2s ease;
}

.back:active {
  background: rgba(255, 255, 255, 0.42);
}

.back svg {
  width: 20px;
  height: 20px;
}


/* ==========================================================================
   屏2 · 周边展示
   ========================================================================== */

.gallery {
  --gap-grid: 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) var(--pad-screen)
    calc(env(safe-area-inset-bottom, 0px) + 24px);
}

.gallery__title {
  flex: none;
  font-size: 36px;
  text-align: center;
}

.gallery__scroll {
  flex: 1;
  min-height: 0;
  margin: 20px calc(var(--pad-screen) * -1) 0;
  padding: 0 var(--pad-screen);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-grid);
}

.gallery__card {
  opacity: 0;
  transform: translateY(28px);
}

/* 挂在屏幕激活态上，每次进入屏2 都会重新播放 */
.screen--gallery.is-active .gallery__card {
  animation: card-rise 0.62s var(--ease-pop) both;
  animation-delay: calc(var(--i, 0) * 0.07s + 0.12s);
}

@keyframes card-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery__figure {
  position: relative;
  aspect-ratio: 168 / 152;
  border-radius: var(--radius-card);
  background: var(--c-card);
  overflow: hidden;
}

/* 图片按需加载，加载完再淡入，避免半张图闪一下 */
.gallery__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery__figure img.is-loaded {
  opacity: 1;
}

.gallery__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-cartoon);
  font-size: 15px;
  color: rgba(190, 110, 40, 0.55);
  letter-spacing: 0.08em;
}

.gallery__name {
  margin-top: 8px;
  font-size: 22px;
  text-align: center;
  line-height: 1.25;
}

.gallery__blank {
  grid-column: 1 / -1;
  padding: 56px 0;
  text-align: center;
  font-family: var(--font-cartoon);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
}

.gallery__entry {
  flex: none;
  width: 100%;
  margin-top: 20px;
}


/* ==========================================================================
   屏3 · 登记表单

   排版依据（引的是实测研究，不是审美偏好）：
   · Baymard Institute 用 18 个移动电商站、1000+ 个表单字段做过实机测试，
     结论是移动端标签必须放在输入框上方 —— 左置标签把输入框压掉近一半宽，
     用户看不见自己填的内容，测试中大量人打错字自己发现不了、改也改不动。
     唯一例外是横屏，本文件末尾单独处理。
   · NN/g 的眼动实验同样是这个结论：顶部标签的完成速度接近左置的两倍。
   · 9 项兑换清单平铺时独占 468px，是表单膨胀的主因，改两列后压到约 260px。
   ========================================================================== */

.register {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) var(--pad-screen)
    calc(env(safe-area-inset-bottom, 0px) + 28px);
}

.register__title {
  flex: none;
  font-size: 32px;
  text-align: center;
}

/* flex 项目默认 min-height:auto 会导致它不肯收缩到内容以下，
   显式置 0 后，矮屏（如手机横屏）时表单会退化成可滚动区域而不是把按钮挤出屏幕。 */
.register__form {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 14px;
  padding-right: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* -------- 分组 -------- */

.register__group {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.register__group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
}

/* 「选填」标的是少数那一头：必填有 5 项、选填只有 1 项，
   标少数比每个必填都挂个星号省视觉噪声 */
.register__group-tag {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #a84d0e;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-shadow: none;
}


/* -------- 字段 -------- */

.register__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 标签压在亮星上会被吃掉笔画（截图里「抖音名字」的「名」直接看不见），
   给它一圈深棕描边——跟分组标题同一套语言，只是细一档 */
.register__field-label {
  font-family: var(--font-cartoon);
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
  text-shadow:
    -1.5px -1.5px 0 var(--c-ink), 1.5px -1.5px 0 var(--c-ink),
    -1.5px 1.5px 0 var(--c-ink), 1.5px 1.5px 0 var(--c-ink),
    -1.5px 0 0 var(--c-ink), 1.5px 0 0 var(--c-ink),
    0 -1.5px 0 var(--c-ink), 0 1.5px 0 var(--c-ink);
}

.register__input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: #4a2a12;
  font-family: var(--font-body);
  font-size: 17px;
}

/* 占位符实测只有 2.12:1，太浅。业界惯例是保持浅色以免被误认成已填内容，
   但 0.42 已经浅到看不清，抬到 0.65（约 3.5:1）—— 仍明显淡于真实输入，
   而占位符里放的是「填数字，如 16」这类格式示例，本身是有用的信息 */
.register__input::placeholder {
  color: rgba(122, 61, 12, 0.65);
}

.register__input:focus {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

/* 地址通常二三十个字，单行框里会左右滚动、看不全，给两行让它自己长高 */
.register__address {
  height: auto;
  padding: 12px 16px;
  line-height: 1.45;
  resize: none;
}

/* 信息块统一成"浅白底 + 深字"——跟输入框同一套语言。
   曾经用半透明白面板 + 白字，实测只有 2.2:1：面板把底色提亮了，白字反而更看不清。 */
.register__gift {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
}

.register__gift-title {
  font-family: var(--font-cartoon);
  font-size: 16px;
  color: #a84d0e;
}

.register__gift-body {
  font-size: 16px;
  line-height: 1.5;
  color: #4a2a12;
}


/* -------- 积分兑换 -------- */

/* 汇总行做成白底条：这是"选完立刻扣分"的实时反馈，
   白字直接压在星空上实测只有 2.5:1 左右，看不清还剩多少分。 */
.register__redeem-sum {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: #a84d0e;
  font-size: 14px;
  line-height: 1.4;
}

.register__redeem-sum.is-over {
  background: #ffe4dc;
  color: #b23c2a;
  font-weight: 600;
}

/* 单列纵向。格子横向有 316px 可用，空间宽裕：
   积分占固定宽、兑换物名跟在后面，各格左边缘对齐，比两列时好扫读。
   代价是比两列高约 230px（表单滚 1.69 → 约 2.05 屏）。 */
.register__tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.register__tiers-empty {
  font-size: 15px;
  line-height: 1.5;
  color: #4a2a12;
}

/* 整格都是触控目标（≥44px），别只让那个小勾选框可点 */
.register__tier-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #4a2a12;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.register__tier.is-on .register__tier-hit {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--c-base);
}

.register__tier-hit:active {
  background: #ffe9d2;
}

.register__tier-box {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-base);
}

/* 积分占固定宽，各格的兑换物名才对得齐 */
.register__tier-cost {
  flex: none;
  min-width: 62px;
  white-space: nowrap;
  font-family: var(--font-cartoon);
  font-size: 16px;
  color: #a84d0e;
}

.register__tier-gift {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.3;
  word-break: break-word;
}

.register__spacer {
  flex: 1;
  min-height: 16px;
}

/* 状态提示也走"浅白底 + 深字"。原来白字压在星空上只有 2.8:1，
   而这条恰恰是"提交失败"这种必须看清的信息。空着时整条不占位。 */
.register__status {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #a84d0e;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  /* 中文断行要用 balance：pretty 对中文完全不生效，
     否则「请调整」会被拆成「请调 / 整」 */
  text-wrap: balance;
}

.register__status:empty {
  display: none;
}

.register__status.is-error {
  background: #ffe4dc;
  color: #b23c2a;
}

.register__submit {
  flex: none;
  width: 100%;
}

.pill[disabled] {
  opacity: 0.6;
  pointer-events: none;
}


/* -------- 横屏 -------- */

/* Baymard 那条"标签在上"的唯一例外。横屏可视高度本就极小
   （实测 844×390 时表单可视区只剩 168px），标签再占一行会白白吃掉一半，
   所以这里改回标签在左，并把兑换清单铺成三列进一步压高。 */
@media (orientation: landscape) and (max-height: 520px) {
  .register__group {
    gap: 10px;
  }

  .register__field {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .register__field-label {
    flex: none;
    width: 86px;
  }

  /* 横屏可视高度极小，清单重新铺成三列压高 */
  .register__tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
}


/* ==========================================================================
   登记弹窗
   ========================================================================== */

.modal {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.26s ease, visibility 0s;
}

.modal__mask {
  position: absolute;
  inset: 0;
  background: rgba(41, 20, 5, 0.5);
}

.modal__card {
  position: relative;
  width: 306px;
  max-width: 100%;
  padding: 24px;
  border-radius: var(--radius-pill);
  background: #fff;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transform: scale(0.9);
  transition: transform 0.3s var(--ease-pop);
}

.modal.is-open .modal__card {
  transform: scale(1);
}

.modal__title {
  font-family: var(--font-cartoon);
  font-size: 26px;
  color: var(--c-base);
}

.modal__desc {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-soft);
}

.result__gifts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

.result__gift {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff2e3;
  color: #b3541a;
  font-family: var(--font-cartoon);
  font-size: 16px;
}

.result__note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink-soft);
}

/* 没有积分兑换时整行不占位置 */
.result__note:empty {
  display: none;
}

.modal__actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.modal__btn {
  flex: 1;
  height: 46px;
  border-radius: 23px;
  font-family: var(--font-cartoon);
  font-size: 20px;
  transition: background-color 0.2s ease;
}

.modal__btn--ghost {
  background: #f2ebe4;
  color: var(--c-ink-soft);
}

.modal__btn--ghost:active {
  background: #e6dcd2;
}

.modal__btn--primary {
  background: var(--c-base);
  color: #fff;
}

.modal__btn--primary:active {
  background: #cf6620;
}


/* ==========================================================================
   降低动态
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .screen--gallery.is-active .gallery__card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .gallery__figure img {
    transition: none;
  }

  .modal__card,
  .modal {
    transition: none;
  }

  .modal__card {
    transform: none;
  }
}