/* =========================================================================
   平行信箱 release-v2 · 视觉规范 v2

   方向：
   - 文字只用黑白灰，颜色全部让位给照片与封蜡
   - 信封与信纸一律白底，稀有度靠封蜡 / 描边 / 流光 / 粒子区分，不靠换纸色
   - 照片保留本色，不加任何调色滤镜；只裁切不拉伸
   - 每屏严格控制在视口内，手机端不出现滚动
   ========================================================================= */

:root {
  /* 信纸暗纹强度：超过 0.2 正文就开始发灰，这里一处收口 */
  --letter-wm: 0.14;
  --ground: #08080a;
  --ground-2: #101014;
  --line: #26262d;

  --text: #f4f4f2;
  --text-2: #a6a6aa;
  --text-3: #6d6d74;
  --text-4: #4a4a51;

  /* 信封与信纸统一白底 */
  --paper: linear-gradient(158deg, #fbfaf8 0%, #f1eee9 52%, #e4e0d9 100%);
  --paper-flap: linear-gradient(168deg, #fdfcfa, #efece6);
  --paper-edge: rgba(24, 22, 18, 0.14);
  --paper-ink: #2a2a2c;
  --paper-ink-2: #6f6f74;
  --paper-rule: rgba(30, 28, 24, 0.12);

  --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --xhs-host-top: 0px;
  --screen-top-offset: calc(var(--safe-top) + 8px);
  --bottom-action-lift: clamp(2px, 0.4dvh, 4px);
  --keyboard: 0px;

  --font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-letter: "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-stamp: "Courier New", Courier, monospace;

  /* 稀有度：信封换彩纸，信纸恒白 */
  --tier-env-paper: linear-gradient(155deg, #d5b684, #c9a876 55%, #ab8b5e);
  --tier-env-flap: #b8946a;
  --tier-env-ink: #2c2620;
  --tier-env-blend: multiply;
  --tier-seal-mark: rgba(255, 255, 255, 0.55);
  --tier-seal: #8a2f2a;
  --tier-accent: #b9b9bc;
  --tier-edge: rgba(30, 28, 24, 0.16);
  --tier-sheen: 0;
  --tier-halo: rgba(140, 140, 150, 0.10);
}

* { box-sizing: border-box; }

html {
  height: 100%;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;                 /* 手机端不允许整页滚动 */
  overscroll-behavior: none;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#app { height: 100%; }
.app-content { height: 100%; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- 星球背景 */

.cosmos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cosmos i {
  position: absolute;
  border-radius: 50%;
  display: block;
  filter: blur(var(--blur, 30px));
  opacity: var(--o, 0.5);
  will-change: transform;
}

/* 每颗星球是一个被模糊掉的球体：高光偏一侧，边缘融进夜色 */
.cosmos i:nth-child(1) {
  --blur: 26px; --o: 0.55;
  width: 62vw; height: 62vw;
  left: -18vw; top: -12vh;
  background: radial-gradient(circle at 34% 30%, #4b5570 0%, #2b3145 42%, #14172200 72%);
  animation: drift-a 34s ease-in-out infinite;
}

.cosmos i:nth-child(2) {
  --blur: 34px; --o: 0.45;
  width: 46vw; height: 46vw;
  right: -14vw; top: 18vh;
  background: radial-gradient(circle at 62% 38%, #6a5a68 0%, #38303f 46%, #1a161e00 74%);
  animation: drift-b 44s ease-in-out infinite;
}

.cosmos i:nth-child(3) {
  --blur: 22px; --o: 0.40;
  width: 30vw; height: 30vw;
  left: 8vw; bottom: 14vh;
  background: radial-gradient(circle at 40% 34%, #55606b 0%, #2c333b 48%, #14181c00 76%);
  animation: drift-c 38s ease-in-out infinite;
}

.cosmos i:nth-child(4) {
  --blur: 44px; --o: 0.34;
  width: 74vw; height: 74vw;
  right: -30vw; bottom: -22vh;
  background: radial-gradient(circle at 50% 40%, #3f4658 0%, #22262f 50%, #10121700 78%);
  animation: drift-a 52s ease-in-out infinite reverse;
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4vw, 3vh, 0) scale(1.06); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-5vw, 4vh, 0) scale(1.08); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3vw, -4vh, 0) scale(1.05); }
}

/* ------------------------------------------------------------------- 屏幕 */

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding:
    var(--screen-top-offset)
    calc(var(--safe-right) + 20px)
    calc(var(--safe-bottom) + 7px + var(--bottom-action-lift))
    calc(var(--safe-left) + 20px);
}

.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 76% 52% at 50% 44%, var(--tier-halo), transparent 74%);
  transition: background 0.5s ease;
}

.screen__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.screen > *:not(.screen__fx):not(.cosmos) { position: relative; z-index: 2; }

/* 内容居中的屏幕 */
.screen--centered .screen__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding-bottom: var(--keyboard);
  transition: padding-bottom 0.25s ease;
}

/* 首页：文字压在下方 */
.screen--intro .screen__main {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding-bottom: clamp(8px, 1.8dvh, 15px);
}

/* 首页唯一的叙事物件：一封刚抵达当前宇宙的漂浮回信。 */
.screen.screen--intro > .intro__floating-envelope {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  place-items: center;
  pointer-events: none;
  opacity: 0.96;
}

.intro__floating-envelope::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(68vw, 292px);
  height: min(30vw, 130px);
  border: 1px solid rgba(180, 184, 198, 0.16);
  border-right-color: rgba(180, 184, 198, 0.04);
  border-bottom-color: transparent;
  border-radius: 50%;
  content: '';
  transform: translate(-50%, -50%) rotate(-11deg);
}

.intro__floating-envelope::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(48vw, 203px);
  height: min(13vw, 55px);
  content: '';
  background: radial-gradient(ellipse, rgba(168, 174, 193, 0.16), transparent 68%);
  filter: blur(10px);
  transform: translate(-50%, 22px);
}

.intro__floating-envelope > .envelope--float {
  --env-w: min(36vw, 154px);
  transform: translate3d(0, 0, 0) rotate(-6deg);
  transform-origin: 50% 52%;
  will-change: transform;
  animation: intro-envelope-drift 6.8s ease-in-out infinite;
}

/* 首页信封换档：背景是渐变，transition 插值不了，只能用一次淡入把硬切藏起来。
   淡入挂在内部元素上，避开 .envelope--float 自己的 transform 漂浮动画。 */
.envelope--float.is-swapping .envelope__body,
.envelope--float.is-swapping .envelope__flap,
.envelope--float.is-swapping .envelope__seal {
  animation: tier-swap 420ms ease;
}

@keyframes tier-swap {
  from { opacity: 0.4; filter: blur(1.2px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes intro-envelope-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  48% { transform: translate3d(0, -10px, 0) rotate(-2.5deg); }
  72% { transform: translate3d(0, -6px, 0) rotate(-4deg); }
}

.screen__footer {
  flex: 0 0 auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.screen__footer--split {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.screen__footer--split .primary-action { flex: 1 1 auto; }

/* ------------------------------------------------------------------- 排版 */

.eyebrow {
  margin: 0;
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

h1 {
  margin: 0;
  font-family: var(--font-letter);
  font-weight: 600;
  font-size: clamp(21px, 3.1vh, 29px);
  line-height: 1.44;
  color: var(--text);
  text-wrap: balance;
}

h1 span { display: block; }

h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
p { margin: 0; }

/* ------------------------------------------------------------------- 控件 */

.primary-action,
.secondary-action,
.danger-action {
  appearance: none;
  width: 100%;
  border-radius: 999px;
  padding: 13px 20px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.2s ease;
}

.primary-action {
  border: 1px solid rgba(244, 244, 242, 0.9);
  background: var(--text);
  color: #0b0b0d;
}

.primary-action:active { transform: scale(0.98); }

.secondary-action {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
}

.danger-action {
  border: 1px solid #7d3a30;
  background: #7d3a30;
  color: #f6e2dd;
}

.text-action {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: 13.5px;
  min-width: 44px;
  min-height: 44px;
  padding: 12px 6px;
  cursor: pointer;
  white-space: nowrap;      /* 「返回」必须保持一行 */
  flex: 0 0 auto;
}

.text-action:active { color: var(--text); }

.icon-action {
  appearance: none;
  border: 0;
  background: transparent;
  width: 44px; height: 44px;
  padding: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.icon-action img { width: 100%; height: 100%; opacity: 0.55; filter: grayscale(1); }

.icon-action[data-sound-state="on"] img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

button:focus-visible,
input:focus-visible { outline: 2px solid var(--text-2); outline-offset: 3px; }

.chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  flex: 0 0 auto;
}

.chrome__mark {
  font-family: var(--font-stamp);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-4);
  white-space: nowrap;
}

.chrome__status {
  font-family: var(--font-stamp);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  white-space: nowrap;
}

.rarity-badge {
  display: inline-block;
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--text-2);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

.rarity-badge--lg {
  font-size: 11px;
  color: var(--text);
  border-color: var(--tier-accent);
}

/* ------------------------------------------------------------- 照片（无变形） */

/* 图集单元格是 1:1；尺寸与位移由 app.js 按容器几何计算。 */
.photo {
  position: relative;
  display: block;
  overflow: hidden;
  background: #17171b;
}

.photo__img {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  border: 0;
}

/* --------------------------------------------------------------- 信封 */

.envelope {
  position: relative;
  width: var(--env-w, 250px);
  max-width: 100%;
  aspect-ratio: 3 / 2;
  perspective: 1100px;
  transform-style: preserve-3d;
  flex: 0 0 auto;
}

.envelope__body {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  z-index: 3;
  overflow: hidden;
  background:
    /* 纸张纤维：两组极淡的斜向细线，交叉出手工纸的质感 */
    repeating-linear-gradient(94deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(6deg, rgba(40, 34, 26, 0.035) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 22% 26%, rgba(60, 55, 45, 0.035) 0 1px, transparent 1.5px) 0 0 / 8px 8px,
    radial-gradient(circle at 66% 72%, rgba(60, 55, 45, 0.03) 0 1px, transparent 1.5px) 4px 4px / 11px 11px,
    var(--tier-env-paper);
  box-shadow:
    0 22px 44px -20px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px var(--tier-edge);
}

.envelope__body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(40, 36, 30, 0.10), transparent 46%);
  pointer-events: none;
}

/* 折缝：左 / 右 / 底三片纸在中心交汇。
   没有这一层时信封只是「矩形 + 三角」，加上后才一眼认得出是信封。
   三片用不同明度区分受光面，接缝靠 drop-shadow 描出一根发丝线。 */
.envelope__folds {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.envelope__fold {
  position: absolute;
  inset: 0;
  display: block;
}

.envelope__fold--left {
  clip-path: polygon(0 0, 50% 50%, 0 100%);
  background: linear-gradient(96deg, rgba(0, 0, 0, 0.085), rgba(0, 0, 0, 0.02));
  filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.14));
}

.envelope__fold--right {
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  background: linear-gradient(264deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  filter: drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.10));
}

.envelope__fold--bottom {
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.11), rgba(255, 255, 255, 0.055));
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.16));
}

.envelope__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--tier-sheen);
  background: linear-gradient(104deg, transparent 34%, rgba(232, 199, 102, 0.42) 48%, rgba(255, 255, 255, 0.3) 54%, transparent 68%);
  background-size: 260% 100%;
  animation: sweep 4.4s linear infinite;
}

@keyframes sweep {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

.envelope__flap {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  background:
    /* 尖端往下压暗，模拟折痕处的受光衰减 */
    linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, 0.11) 100%),
    linear-gradient(168deg, color-mix(in srgb, var(--tier-env-flap) 84%, white), var(--tier-env-flap));
  transform-origin: 50% 0%;
  z-index: 5;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22))   /* 纸厚的亮边 */
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.28));      /* 盖在信封上的投影 */
  transition:
    transform 0.72s cubic-bezier(0.56, 0, 0.28, 1) 0.16s,
    background 0.3s ease 0.42s;
}

/* 翻盖转过 176° 后我们看到的是它的背面，
   此时换成内衬色，就等于「掀开信封看见里子」——一行搞定，不需要做双面结构。 */
.envelope[data-open="true"] .envelope__flap {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.16), transparent 46%),
    repeating-linear-gradient(46deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 6px),
    var(--tier-env-lining);
}

.envelope__mouth {
  position: absolute;
  left: 50%; top: 26%;
  width: 44%; height: 22%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

.envelope__incoming-photo {
  position: absolute;
  top: -42%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 66%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(248, 245, 238, 0.92);
  border-radius: 6px;
  background: #17171b;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
  transform: translateX(-50%) rotate(2deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  will-change: transform, opacity;
}

.envelope__seal {
  position: absolute;
  left: 50%; top: 46%;
  width: 16%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
}

/* 蜡不会流成正圆：用不对称圆角做出摊开的蜡饼轮廓，
   再叠一圈内阴影当作边缘隆起，中心压深模拟被印章压下去的凹面。 */
.seal-half {
  position: absolute;
  inset: 0;
  border-radius: 47% 53% 51% 49% / 50% 47% 53% 50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, 0.42), transparent 42%),
    radial-gradient(circle at 50% 52%,
      color-mix(in srgb, var(--tier-seal) 74%, black) 0%,
      var(--tier-seal) 46%,
      color-mix(in srgb, var(--tier-seal) 72%, white) 76%,
      color-mix(in srgb, var(--tier-seal) 55%, black) 100%);
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.42),
    inset 0 1px 2px rgba(255, 255, 255, 0.34),
    inset 0 -2px 4px rgba(0, 0, 0, 0.30);
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.3, 1), opacity 0.45s ease 0.12s;
}

.seal-half--left { clip-path: polygon(0 0, 52% 0, 45% 20%, 55% 42%, 43% 64%, 53% 86%, 47% 100%, 0 100%); }
.seal-half--right { clip-path: polygon(52% 0, 100% 0, 100% 100%, 47% 100%, 53% 86%, 43% 64%, 55% 42%, 45% 20%); }

.seal-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.seal-mark svg {
  width: 52%;
  height: 52%;
  /* 上暗下亮 = 凹刻；反过来才是凸起 */
  filter:
    drop-shadow(0 -0.5px 0 rgba(0, 0, 0, 0.34))
    drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.30));
}

[data-seal-glow="true"] .seal-half { animation: seal-pulse 3.6s ease-in-out infinite; }

@keyframes seal-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

.envelope__letter {
  position: absolute;
  left: 8%; right: 8%;
  top: 6%; bottom: 7%;
  background: linear-gradient(175deg, #ffffff, #f2efe9);
  border-radius: 2px;
  transform: translateY(6%);
  opacity: 0;
  z-index: 2;
  padding: 9% 8%;
  display: flex;
  flex-direction: column;
  gap: 7%;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.7s cubic-bezier(0.22, 0.9, 0.24, 1) 0.55s, opacity 0.3s ease 0.55s;
}

.envelope__letter i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--paper-rule);
}

.envelope__letter i:nth-child(1) { width: 78%; }
.envelope__letter i:nth-child(2) { width: 92%; }
.envelope__letter i:nth-child(3) { width: 84%; }
.envelope__letter i:nth-child(4) { width: 46%; align-self: flex-end; }

.envelope__address {
  position: absolute;
  left: 9%;
  bottom: 13%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 4;
  color: var(--tier-env-ink);
  mix-blend-mode: var(--tier-env-blend);
  max-width: 62%;
}

.envelope__address small {
  font-family: var(--font-stamp);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: var(--paper-ink-2);
}

.envelope__address b {
  font-family: var(--font-letter);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.envelope__counter {
  position: absolute;
  right: 9%;
  bottom: 14%;
  z-index: 4;
  font-family: var(--font-stamp);
  font-size: 11.5px;
  color: var(--tier-env-ink);
  mix-blend-mode: var(--tier-env-blend);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

/* 邮戳：灰墨，稀有档才带一点色 */

.postmark {
  position: absolute;
  top: -3%;
  right: -5%;
  width: 34%;
  aspect-ratio: 1;
  transform: rotate(-9deg);
  z-index: 4;
  opacity: 0.6;
  pointer-events: none;
}

.postmark--ghost {
  top: 7%; right: 5%;
  transform: rotate(8deg);
  opacity: 0.22;
}

.postmark svg { width: 100%; height: 100%; }

/* 信封上的邮戳跟随信封纸色换墨；信纸上的仍是灰墨（见 .letter__stamp） */
.envelope .postmark { mix-blend-mode: var(--tier-env-blend); }
.envelope .pm-ring { stroke: var(--tier-env-ink); }
.envelope .pm-cancel line { stroke: var(--tier-env-ink); }
.envelope .pm-arc { fill: var(--tier-env-ink); }
.envelope .pm-year { fill: var(--tier-env-ink); }
.envelope .pm-suffix { fill: var(--tier-env-ink); }
.pm-ring { fill: none; stroke: var(--paper-ink-2); stroke-width: 1.4; }
.pm-cancel line { stroke: var(--paper-ink-2); stroke-width: 1.2; }
.pm-arc { font-family: var(--font-stamp); font-size: 8px; fill: var(--paper-ink-2); letter-spacing: 0.06em; }
.pm-year { font-family: var(--font-stamp); font-size: 30px; fill: var(--paper-ink); }
.pm-suffix { font-family: var(--font-stamp); font-size: 8px; fill: var(--paper-ink-2); letter-spacing: 0.04em; }

/* 信封状态 */

/* 张口等待照片落入 */
.envelope[data-receiving="true"] .envelope__flap {
  z-index: 1;
  transform: rotateX(-156deg);
  transition: transform 0.3s ease;
}

.envelope[data-receiving="true"] .envelope__seal,
.envelope[data-swallow="true"] .envelope__seal { opacity: 0; }

.envelope[data-swallow="true"] .envelope__flap {
  animation: flap-gulp 0.36s ease both;
}

/* 顶盖完全落下后才贴封蜡。both 会让圆章在 0.38s 延迟期保持隐藏，
   避免 receiving 属性移除的一帧里先闪出默认圆章。 */
.envelope[data-swallow="true"] .envelope__seal {
  animation: wax-seal-place 0.18s cubic-bezier(0.2, 0.75, 0.3, 1.25) 0.38s both;
}

@keyframes flap-gulp {
  0% { transform: rotateX(-156deg); }
  58% { transform: rotateX(8deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes wax-seal-place {
  0% { opacity: 0; transform: translate(-50%, -62%) scale(1.42); }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.envelope[data-open="true"] .envelope__flap { transform: rotateX(-176deg); z-index: 1; }
.envelope[data-open="true"] .seal-half--left { transform: translate(-26px, 18px) rotate(-46deg); opacity: 0; }
.envelope[data-open="true"] .seal-half--right { transform: translate(26px, 20px) rotate(50deg); opacity: 0; }
.envelope[data-open="true"] .seal-mark { opacity: 0; }
.envelope[data-open="true"] .seal-half { animation: none; }
.envelope[data-open="true"] .envelope__letter { transform: translateY(-46%); opacity: 1; z-index: 7; }

.envelope[data-launch="true"] { animation: envelope-launch 2.3s cubic-bezier(0.5, 0, 0.75, 0.4) forwards; }

@keyframes envelope-launch {
  0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  22% { transform: translateY(16px) scale(1.05) rotate(-3deg); opacity: 1; }
  100% { transform: translateY(-34vh) scale(0.035) rotate(16deg); opacity: 0; }
}

.envelope--handover { --env-w: min(74vw, 288px); }
.envelope--dock { --env-w: min(36vw, 148px); }
.envelope--launch { --env-w: min(62vw, 240px); }
.envelope--reply { --env-w: min(72vw, 280px); }

/* -------------------------------------------------------------- 首页 */

.intro__method { font-size: 14.5px; line-height: 1.75; color: var(--text-2); }
.intro__hint { font-size: 13.5px; line-height: 1.75; color: var(--text-3); }
.intro__trust { font-size: 11.5px; line-height: 1.7; color: var(--text-4); }

/* -------------------------------------------------------- 昵称 / 递交 */

.recipient__intro,
.handover__copy {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-2);
  max-width: 30ch;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  text-align: left;
}

.field > span { font-size: 12.5px; color: var(--text-3); }

.field input {
  appearance: none;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ground-2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  padding: 13px 14px;
  text-align: center;
}

.field input::placeholder { color: var(--text-4); }
.field small { font-size: 11px; line-height: 1.6; color: var(--text-4); text-align: center; }

.handover__stage { display: grid; place-items: center; padding: 6px 0; }

.screen--handover .envelope { animation: envelope-handed 0.9s cubic-bezier(0.2, 0.9, 0.25, 1); }

@keyframes envelope-handed {
  from { transform: translateY(42vh) rotate(-11deg) scale(0.82); opacity: 0; }
  60% { opacity: 1; }
}

/* ---------------------------------------------------------- 选照片 */

.question__head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 6px 0 10px;
}

.question__head h1 { font-size: clamp(17px, 2.4vh, 21px); line-height: 1.5; }
.question__hint { font-size: 12px; color: var(--text-4); }

.progress { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }

.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--text-2);
  transition: width 0.5s ease;
}

/* 两个选项上下排列 */
.pick-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  animation: pick-swap 0.42s ease;
}

@keyframes pick-swap {
  from { opacity: 0; transform: translateY(12px); }
}

.pick-card {
  appearance: none;
  position: relative;
  border: 1px solid var(--line);
  background: var(--ground-2);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  min-height: 0;
  display: block;
  text-align: left;
  transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
}

.pick-card:active { transform: scale(0.985); }
.pick-card[data-picked="true"] {
  opacity: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: scale(0.985);
  transition: none;
}
.pick-card[data-dismissed="true"] { opacity: 0.22; transform: scale(0.97); }

.pick-card .photo { width: 100%; height: 100%; }

.pick-card__copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 26px 13px 12px;
  background: linear-gradient(0deg, rgba(6, 6, 8, 0.88) 12%, rgba(6, 6, 8, 0.55) 48%, transparent);
}

.pick-card__copy strong { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.4; }
.pick-card__copy small { font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.68); }

.question__dock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
}

.question__dock-copy { font-size: 11.5px; color: var(--text-4); }
.question__dock-copy b { font-family: var(--font-stamp); color: var(--text-2); font-variant-numeric: tabular-nums; }

.flying-photo {
  position: fixed;
  z-index: 999;
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: 0 20px 44px -12px rgba(0, 0, 0, 0.9);
  transform-origin: center center;
}

/* ------------------------------------------------------------ 寄出 */

.screen--sending .screen__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.sending__stage { display: grid; place-items: center; min-height: 170px; }
.sending__stage-copy { font-size: 14.5px; color: var(--text); }

.sending__destination {
  font-family: var(--font-stamp);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--text-4);
  transition: color 0.3s ease;
}

.sending__destination[data-locked="true"] { color: var(--text-2); }

/* ------------------------------------------------------------ 抵达 */

.delivery__stage { display: grid; place-items: center; padding: 4px 0; }

.screen--delivery .envelope { animation: envelope-return 1.15s cubic-bezier(0.16, 0.9, 0.3, 1); }

@keyframes envelope-return {
  from { transform: scale(0.035) rotate(-16deg); opacity: 0; }
  55% { opacity: 1; }
}

.delivery__lore {
  font-family: var(--font-letter);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-2);
  max-width: 28ch;
}

/* -------------------------------------------------------------- 信纸 */

.screen--reveal .screen__main,
.screen--card .screen__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 结果从信封中心弹出 */
.letter {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  padding: 16px 17px 18px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--paper-ink);
  overflow: hidden;
  box-shadow:
    0 26px 52px -22px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px var(--tier-edge);
  transform-origin: center center;
  animation: letter-pop 0.72s cubic-bezier(0.2, 0.92, 0.24, 1);
}

@keyframes letter-pop {
  from { transform: scale(0.08) translateY(6vh); opacity: 0; }
  40% { opacity: 1; }
}

.letter::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* 信纸暗纹母题：17 款各一。取色统一走 --tier-watermark-ink（= 该款的 accent），
   所以纸永远是白的，差异只在纹样与纹样的颜色，正文可读性不随款式漂移。 */

.letter[data-watermark="fibre"]::before {
  background-image: repeating-linear-gradient(94deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 5px), repeating-linear-gradient(6deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 7px);
  opacity: var(--letter-wm);
}

.letter[data-watermark="dots"]::before {
  background-image: radial-gradient(circle at 50% 50%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.4px, transparent 1.8px);
  background-size: 18px 18px;
  opacity: var(--letter-wm);
}

.letter[data-watermark="weave"]::before {
  background-image: repeating-linear-gradient(45deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 6px);
  opacity: var(--letter-wm);
}

.letter[data-watermark="grain"]::before {
  background-image: radial-gradient(circle at 20% 30%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.1px, transparent 1.5px), radial-gradient(circle at 70% 65%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.5px, transparent 1.9px);
  background-size: 13px 13px, 19px 19px;
  opacity: var(--letter-wm);
}

.letter[data-watermark="grid"]::before {
  background-image: repeating-linear-gradient(0deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 24px);
  opacity: var(--letter-wm);
}

.letter[data-watermark="ripple"]::before {
  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 12px, var(--tier-watermark-ink, var(--paper-rule)) 12px 13px, transparent 13px 26px);
  background-size: 92px 92px;
  opacity: var(--letter-wm);
}

.letter[data-watermark="lattice"]::before {
  background-image: repeating-linear-gradient(60deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 15px), repeating-linear-gradient(-60deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 15px);
  opacity: var(--letter-wm);
}

.letter[data-watermark="chevron"]::before {
  background-image: repeating-linear-gradient(135deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 11px);
  opacity: var(--letter-wm);
}

.letter[data-watermark="stars"]::before {
  background-image: radial-gradient(circle at 18% 22%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.4px, transparent 1.8px), radial-gradient(circle at 68% 14%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.1px, transparent 1.5px), radial-gradient(circle at 44% 62%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.6px, transparent 2px), radial-gradient(circle at 86% 78%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.2px, transparent 1.6px);
  background-size: 120px 120px, 88px 88px, 150px 150px, 104px 104px;
  opacity: var(--letter-wm);
}

.letter[data-watermark="rings"]::before {
  background-image: repeating-radial-gradient(circle at 78% 24%, transparent 0 20px, var(--tier-watermark-ink, var(--paper-rule)) 20px 21px, transparent 21px 42px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: var(--letter-wm);
}

.letter[data-watermark="diamond"]::before {
  background-image: repeating-linear-gradient(45deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 18px), repeating-linear-gradient(-45deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 18px);
  opacity: var(--letter-wm);
}

.letter[data-watermark="mesh"]::before {
  background-image: repeating-linear-gradient(0deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, var(--tier-watermark-ink, var(--paper-rule)) 0 1px, transparent 1px 9px);
  opacity: var(--letter-wm);
}

.letter[data-watermark="constellation"]::before {
  background-image: radial-gradient(circle at 20% 18%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.8px, transparent 2.2px), radial-gradient(circle at 52% 34%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.3px, transparent 1.7px), radial-gradient(circle at 78% 20%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.6px, transparent 2px), radial-gradient(circle at 34% 70%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.4px, transparent 1.8px), linear-gradient(24deg, transparent calc(50% - 0.4px), var(--tier-watermark-ink, var(--paper-rule)) 50%, transparent calc(50% + 0.4px));
  background-size: 170px 170px, 130px 130px, 190px 190px, 150px 150px, 100% 100%;
  opacity: var(--letter-wm);
}

.letter[data-watermark="waves"]::before {
  background-image: repeating-radial-gradient(ellipse 120% 40% at 50% 0%, transparent 0 16px, var(--tier-watermark-ink, var(--paper-rule)) 16px 17px, transparent 17px 34px);
  background-size: 100% 60%;
  opacity: var(--letter-wm);
}

.letter[data-watermark="rays"]::before {
  background-image: repeating-conic-gradient(from 0deg at 50% 34%, var(--tier-watermark-ink, var(--paper-rule)) 0deg 0.35deg, transparent 0.35deg 9deg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: var(--letter-wm);
}

.letter[data-watermark="ember"]::before {
  background-image: radial-gradient(circle at 30% 76%, var(--tier-watermark-ink, var(--paper-rule)) 0 2px, transparent 2.6px), radial-gradient(circle at 66% 88%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.4px, transparent 1.9px), radial-gradient(circle at 48% 60%, var(--tier-watermark-ink, var(--paper-rule)) 0 1.1px, transparent 1.5px);
  background-size: 140px 140px, 96px 96px, 116px 116px;
  opacity: var(--letter-wm);
}

.letter[data-watermark="seal"]::before {
  background-image: radial-gradient(circle at 50% 48%, transparent 0 76px, var(--tier-watermark-ink, var(--paper-rule)) 76px 78px, transparent 79px), radial-gradient(circle at 50% 48%, transparent 0 60px, var(--tier-watermark-ink, var(--paper-rule)) 60px 61px, transparent 62px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: var(--letter-wm);
}

/* 封缄只是两道细环，墨量本来就少，比密织纹样略提一点才看得见；
   但仍压在可读性阈值内 */
.letter[data-watermark="seal"]::before { opacity: calc(var(--letter-wm) * 1.2); }

/* 满幅网格线最容易吃掉字，再压一档 */
.letter[data-watermark="grid"]::before,
.letter[data-watermark="mesh"]::before { opacity: calc(var(--letter-wm) * 0.62); }

/* 纸面反光：稀有档起。
   不是匀速扫过，而是「掠过一下、停几秒、再掠过」——一闪一闪才像反光，
   匀速循环会变成一条一直在爬的亮带。 */
.letter__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-size: 240% 100%;
  background-repeat: no-repeat;
  animation: letter-shine 5.4s ease-in-out infinite;
}

.letter[data-shimmer="cool"] .letter__shine {
  background-image: linear-gradient(102deg, transparent 38%, rgba(147,169,204,.20) 47%, rgba(255,255,255,.40) 52%, rgba(147,169,204,.16) 57%, transparent 66%);
}
.letter[data-shimmer="warm"] .letter__shine {
  background-image: linear-gradient(102deg, transparent 38%, rgba(176,156,196,.22) 47%, rgba(255,255,255,.42) 52%, rgba(176,156,196,.18) 57%, transparent 66%);
}
.letter[data-shimmer="gold"] .letter__shine {
  background-image: linear-gradient(102deg, transparent 36%, rgba(201,162,39,.26) 46%, rgba(255,246,214,.52) 52%, rgba(201,162,39,.22) 58%, transparent 68%);
  animation-duration: 4.6s;
}

@keyframes letter-shine {
  0% { background-position: 200% 0; }
  26% { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}

/* 纸面闪点：稀有档起，几粒微光按不同相位一闪一闪 */
.letter__sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.letter__sparkles i {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--tier-accent) 42%, transparent 72%);
  opacity: 0;
  animation: letter-twinkle 3.4s ease-in-out infinite;
}

.letter__sparkles i:nth-child(1) { left: 12%; top: 18%; animation-delay: 0s; }
.letter__sparkles i:nth-child(2) { left: 78%; top: 26%; animation-delay: .7s; width: 5px; height: 5px; }
.letter__sparkles i:nth-child(3) { left: 34%; top: 62%; animation-delay: 1.4s; }
.letter__sparkles i:nth-child(4) { left: 88%; top: 71%; animation-delay: 2.1s; width: 6px; height: 6px; }
.letter__sparkles i:nth-child(5) { left: 22%; top: 86%; animation-delay: 2.8s; width: 5px; height: 5px; }
.letter__sparkles i:nth-child(6) { left: 60%; top: 8%; animation-delay: 1.05s; width: 4px; height: 4px; }

@keyframes letter-twinkle {
  0%, 72%, 100% { opacity: 0; transform: scale(.35); }
  84% { opacity: .95; transform: scale(1); }
}

.letter > *:not(.letter__shine):not(.letter__sparkles):not(.letter__stamp) {
  position: relative;
  z-index: 1;
}

.letter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

.letter__head .rarity-badge {
  color: var(--paper-ink-2);
  border-color: var(--tier-edge);
  background: transparent;
}

.letter__origin { font-family: var(--font-stamp); font-size: 10px; color: var(--paper-ink-2); }

.letter__photo {
  position: relative;
  margin: 0 0 12px;
  border-radius: 2px;
  overflow: hidden;
  flex: 0 1 auto;
  min-height: 0;
}

.letter__photo-button {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

/* 照片保留本色，不加滤镜 */
.letter__photo .photo {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.letter__stamp {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 74px;
  height: 74px;
  z-index: 2;
  pointer-events: none;
}

/* 原本 0.4 太淡，几乎看不出信纸被盖过章 */
.letter__stamp .postmark { position: absolute; inset: 0; width: 100%; opacity: 0.78; }
.letter__stamp .pm-ring,
.letter__stamp .pm-cancel line { stroke: var(--paper-ink); stroke-width: 1.9; }
.letter__stamp .pm-year { fill: var(--paper-ink); }
.letter__stamp .pm-arc,
.letter__stamp .pm-suffix { fill: var(--paper-ink-2); }

/* 稀有档起的「发光印章」：墨仍用深色——白纸上换亮色反而更看不清——
   辉光加在外面，并跟着呼吸 */
.letter[data-sparkle="true"] .letter__stamp {
  animation: stamp-glow 3.2s ease-in-out infinite;
}

@keyframes stamp-glow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--tier-accent)); }
  50% { filter: drop-shadow(0 0 9px var(--tier-accent)) drop-shadow(0 0 18px var(--tier-accent)); }
}

.letter__lead {
  font-family: var(--font-letter);
  font-size: clamp(17px, 2.5vh, 21px);
  line-height: 1.5;
  color: var(--paper-ink);
  margin-bottom: 4px;
}

.letter__subtitle {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--paper-ink-2);
  margin-bottom: 12px;
}

.letter__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.letter__salutation,
.letter__intro,
.letter__text {
  font-family: var(--font-letter);
  line-height: 1.9;
  color: var(--paper-ink);
}

.letter__salutation { font-size: 14px; font-weight: 600; }
.letter__intro { font-size: 13px; color: var(--paper-ink-2); }
.letter__text { font-size: 14px; }

.letter__universe-tip {
  margin: 1px 0 0;
  padding: 7px 9px;
  border-left: 3px solid var(--tier-accent);
  background: rgba(201, 162, 39, 0.09);
  color: var(--paper-ink);
  font-family: var(--font-letter);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.letter[data-special-letter="gilded"] .letter__photo .photo { aspect-ratio: 2 / 1; }
.letter[data-special-letter="gilded"] .letter__subtitle { margin-bottom: 5px; }
.letter[data-special-letter="gilded"] .letter__body { gap: 4px; padding: 7px 0; }
.letter[data-special-letter="gilded"] .letter__intro { font-size: 12.5px; line-height: 1.65; }
.letter[data-special-letter="gilded"] .letter__text { font-size: 13px; line-height: 1.7; }
.letter[data-special-letter="gilded"] .letter__signature { margin-top: 4px; }

.letter__signature {
  margin-top: 11px;
  text-align: right;
  font-family: var(--font-letter);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--paper-ink);
}

.letter__footer {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 9.5px;
  color: var(--paper-ink-2);
  border-top: 1px solid var(--paper-rule);
  padding-top: 8px;
}

.letter__boundary {
  flex: 0 0 auto;
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-4);
  text-align: center;
}

.screenshot-note { font-size: 11.5px; color: var(--text-4); text-align: center; }

/* ---------------- 信纸按稀有度递增的质感 ---------------- */

/* 常见 / 一般：手工毛边纸，纸边不是切齐的直线 */
.letter[data-deckle="true"] {
  border-radius: 3px 5px 4px 6px;
}

.letter[data-deckle="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(30, 28, 24, 0.06);
  mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 6px);
}

/* 一般档：压印的双细线 */
.letter[data-ornament="rule"] {
  box-shadow:
    0 26px 52px -22px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px var(--tier-edge),
    inset 0 0 0 7px transparent,
    inset 0 0 0 8px rgba(30, 28, 24, 0.07);
}

/* 稀有 / 传说：四角压印纹饰 */
.letter[data-ornament="corner"] .letter__head::before,
.letter[data-ornament="corner"] .letter__signature::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border: 1px solid var(--tier-accent);
  opacity: 0.5;
}

.letter[data-ornament="corner"] .letter__head::before {
  top: -6px; left: -6px;
  border-right: 0; border-bottom: 0;
}

.letter[data-ornament="corner"] .letter__signature::after {
  right: -6px; bottom: -14px;
  border-left: 0; border-top: 0;
}

/* 鎏金：整圈描金框 */
.letter[data-ornament="frame"] {
  box-shadow:
    0 26px 52px -22px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px var(--tier-edge),
    inset 0 0 0 6px rgba(232, 199, 102, 0.16),
    inset 0 0 0 7px rgba(201, 162, 39, 0.55);
}

/* 边缘辉光：稀有档起，纸边透出对应宇宙的光 */
.letter[data-edge-glow="cool"] { --letter-glow: rgba(147, 169, 204, 0.34); }
.letter[data-edge-glow="warm"] { --letter-glow: rgba(176, 156, 196, 0.36); }
.letter[data-edge-glow="gold"] { --letter-glow: rgba(232, 199, 102, 0.42); }

.letter:not([data-edge-glow="none"]) {
  filter: drop-shadow(0 0 18px var(--letter-glow, transparent));
}

/* ---------------- 截图页：把开出的信封一起留在画面里 ---------------- */

.letter__keepsake {
  position: relative;
  margin-bottom: 12px;
}

.letter__keepsake .letter__photo { margin-bottom: 0; }

.letter__envelope {
  position: absolute;
  right: -4px;
  bottom: -16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 3;
  pointer-events: none;
}

.letter__envelope .envelope {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}

.letter__envelope figcaption {
  font-family: var(--font-stamp);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--paper-ink-2);
  background: rgba(251, 250, 248, 0.9);
  padding: 1px 6px;
  border-radius: 999px;
}

.envelope--keepsake { --env-w: 104px; }

/* ---------------- 保存到相册 ---------------- */

.save-status {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-4);
  text-align: center;
}

.primary-action[disabled] {
  opacity: 0.55;
  cursor: progress;
}

@media (max-height: 740px) {
  .envelope--keepsake { --env-w: 86px; }
  .letter__envelope figcaption { font-size: 9px; }
}

@media (max-height: 640px) {
  .letter__envelope { display: none; }
}

/* ------------------------------------------------------------ 证据页 */

.screen--evidence .screen__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  overflow: hidden;
}

.evidence__origin-title {
  margin: 0;
  font-family: var(--font-letter);
  font-size: 16px;
  color: var(--text);
}

.evidence-hero__lead {
  font-family: var(--font-letter);
  font-size: 26px;
  line-height: 1.24;
}

.evidence-hero__lead > span { display: block; }

.evidence__summary { font-size: 13px; line-height: 1.65; color: var(--text-2); }
.evidence__summary b { color: var(--text); }

.evidence__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.evidence-item {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ground-2);
  min-height: 0;
}

.evidence-item .photo { width: 78px; aspect-ratio: 1; border-radius: 6px; }
.evidence-item__index {
  position: absolute;
  top: 9px;
  right: 11px;
  font-family: var(--font-stamp);
  font-size: 9px;
  color: var(--text-4);
}
.evidence-item__copy h3 { margin: 0 0 4px; font-size: 13px; color: var(--text); }
.evidence-item__copy p { font-size: 11.5px; line-height: 1.6; color: var(--text-4); }

.evidence-result__painting {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 112px;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.evidence-result__painting > .artwork-zoom-trigger {
  position: absolute;
  inset: 6.25%;
  z-index: 1;
  box-sizing: border-box;
  display: block;
  width: 87.5%;
  height: 87.5%;
  margin: 0;
  padding: 3.125%;
  overflow: hidden;
  border: 0;
  background: #fff;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.9);
  cursor: zoom-in;
  touch-action: manipulation;
  transform: rotate(8.81deg);
  transform-origin: 50% 50%;
}

.evidence-result__painting > .artwork-zoom-trigger .photo {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}

.evidence-result__painting > .artwork-zoom-trigger .photo__img { pointer-events: none; }

.artwork-zoom-trigger:focus-visible {
  outline: 2px solid var(--tier-accent);
  outline-offset: 4px;
}

.evidence__note {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-4);
  text-align: center;
}

.evidence-return__button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
}

.evidence-return__arrow { justify-self: start; font-size: 20px; }
.evidence-return__button strong { grid-column: 2; justify-self: center; }

/* -------------------------------------------------------------- 弹层 */

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 6, 9, 0.82);
}

.dialog {
  width: 100%;
  max-width: 330px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ground-2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dialog p { font-size: 13px; line-height: 1.75; color: var(--text-2); }
.dialog__actions { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }

body.artwork-zoom-active { overflow: hidden; }

.artwork-lightbox__layer {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: grid;
  padding:
    max(calc(var(--xhs-host-top) + 12px), calc(var(--safe-top) + 20px))
    max(20px, var(--safe-right))
    max(28px, calc(var(--safe-bottom) + 20px))
    max(20px, var(--safe-left));
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  animation: artwork-lightbox-fade 180ms ease-out both;
}

.artwork-lightbox__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(6, 6, 9, 0.92);
  cursor: zoom-out;
}

.artwork-lightbox {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 600px);
  max-height: 100%;
  padding-top: 58px;
  color: var(--text);
  place-items: center;
  animation: artwork-lightbox-rise 220ms ease-out both;
}

.artwork-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(244, 244, 242, 0.72);
  border-radius: 999px;
  color: var(--text);
  background: rgba(16, 16, 20, 0.72);
  cursor: pointer;
  place-items: center;
  touch-action: manipulation;
}

.artwork-lightbox__close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.artwork-lightbox__image {
  display: block;
  width: min(82vw, 64dvh, 520px);
  aspect-ratio: 1;
  padding: clamp(8px, 2.8vw, 14px);
  border: 0;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
  cursor: zoom-out;
  touch-action: manipulation;
  transform: rotate(-1.2deg);
}

.artwork-lightbox__image .photo {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.artwork-lightbox__kicker {
  margin: 22px 0 0;
  color: var(--text-3);
  font: 400 11px/1.2 var(--font-stamp);
  letter-spacing: 0.18em;
}

.artwork-lightbox h2 {
  margin: 7px 0 0;
  color: var(--text);
  font: 600 clamp(23px, 6vw, 32px)/1.2 var(--font-letter);
  text-align: center;
}

.artwork-lightbox__hint {
  margin: 9px 0 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.4;
}

.artwork-lightbox__close:focus-visible,
.artwork-lightbox__image:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

@keyframes artwork-lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes artwork-lightbox-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------- 动效降级 */

@media (prefers-reduced-motion: reduce) {
  .artwork-lightbox__layer,
  .artwork-lightbox { animation: none; }

  .envelope__flap,
  .envelope__letter,
  .seal-half { transition-duration: 0.01ms !important; }

  .cosmos i,
  .envelope__sheen,
  .letter__shine,
  .letter__sparkles i,
  .letter[data-sparkle="true"] .letter__stamp,
  [data-seal-glow="true"] .seal-half,
  .screen--handover .envelope,
  .screen--delivery .envelope,
  .pick-grid,
  .letter { animation: none !important; }

  .envelope[data-launch="true"] { animation: none !important; opacity: 0; }

  .intro__floating-envelope > .envelope--float {
    animation: none !important;
    transform: translate3d(0, 0, 0) rotate(-5deg) !important;
  }

  .envelope--float.is-swapping .envelope__body,
  .envelope--float.is-swapping .envelope__flap,
  .envelope--float.is-swapping .envelope__seal { animation: none !important; }
}

/* ------------------------------------------------------------ 小屏压缩 */

@media (max-height: 740px) {
  .letter { padding: 13px 14px 15px; }
  .letter__photo { min-height: 64px; }
  .letter__photo .photo { aspect-ratio: 16 / 9; }
  .letter__body { padding: 10px 0; gap: 6px; }
  .letter__salutation, .letter__text { font-size: 13px; }
  .letter__intro { font-size: 12px; }
  .letter__subtitle { margin-bottom: 9px; }
  .letter__universe-tip { padding: 6px 8px; font-size: 11.5px; line-height: 1.5; }
  .envelope--handover { --env-w: min(62vw, 236px); }
  .envelope--dock { --env-w: min(50vw, 186px); }
  .envelope--reply { --env-w: min(62vw, 240px); }
  .sending__stage { min-height: 140px; }
  .pick-card__copy { padding: 22px 11px 10px; }
  .evidence-item { grid-template-columns: 54px 1fr; }
  .evidence-item .photo { width: 54px; }
}

@media (max-height: 640px) {
  h1 { font-size: 19px; }
  .letter__photo { display: none; }
  .letter__lead { font-size: 16px; }
  .letter[data-special-letter="gilded"] { padding: 10px 12px; }
  .letter[data-special-letter="gilded"] .letter__head { margin-bottom: 6px; }
  .letter[data-special-letter="gilded"] .letter__lead { margin-bottom: 2px; line-height: 1.35; }
  .letter[data-special-letter="gilded"] .letter__subtitle { margin-bottom: 4px; line-height: 1.45; }
  .letter[data-special-letter="gilded"] .letter__body { gap: 3px; padding: 3px 0; }
  .letter[data-special-letter="gilded"] .letter__salutation { font-size: 12px; line-height: 1.45; }
  .letter[data-special-letter="gilded"] .letter__intro { font-size: 11.5px; line-height: 1.42; }
  .letter[data-special-letter="gilded"] .letter__text { font-size: 11.5px; line-height: 1.45; }
  .letter[data-special-letter="gilded"] .letter__signature { margin-top: 2px; font-size: 10.5px; line-height: 1.25; }
  .letter__universe-tip { padding: 5px 7px; font-size: 11px; line-height: 1.42; }
  .letter[data-special-letter="gilded"] .letter__universe-tip { padding: 4px 6px; font-size: 10.5px; line-height: 1.35; }
  .intro__hint, .intro__trust { display: none; }
  .question__hint { display: none; }

  .screen.screen--intro > .intro__floating-envelope {
    min-height: 0;
  }

  .intro__floating-envelope > .envelope--float {
    --env-w: min(31vw, 118px);
  }
}

@media (max-width: 719px) and (orientation: portrait) {
  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] {
    padding: 13px 14px 12px;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__head {
    margin-bottom: 6px;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__photo {
    margin-bottom: 8px;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__photo .photo {
    aspect-ratio: 3 / 1;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__lead {
    margin-bottom: 2px;
    font-size: 18px;
    line-height: 1.35;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__subtitle {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.45;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__body {
    gap: 3px;
    padding: 4px 0;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__salutation {
    font-size: 13px;
    line-height: 1.55;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__intro {
    font-size: 12px;
    line-height: 1.5;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__text {
    font-size: 12.5px;
    line-height: 1.55;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__universe-tip {
    padding: 5px 7px;
    font-size: 11.5px;
    line-height: 1.45;
  }

  html[data-condensed-safe-area="true"] .letter[data-special-letter="gilded"] .letter__signature {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.3;
  }
}

/* ------------------------------------------------ 小红书宿主安全区 / V1 基线 */

@media (max-width: 719px) and (orientation: portrait) {
  :root {
    --xhs-host-top: clamp(78px, 9.4dvh, 92px);
    --screen-top-offset: max(var(--xhs-host-top), calc(var(--safe-top) + 50px));
  }

  /* 选择页沿用 V1 顺序，但只在容器底部安全区之上保留紧凑呼吸空间。 */
  .screen--question {
    padding-bottom: calc(var(--safe-bottom) + 79px + var(--bottom-action-lift));
  }

  .screen.screen--question > .chrome {
    position: absolute;
    right: calc(var(--safe-right) + 23px);
    bottom: calc(var(--safe-bottom) + 12px + var(--bottom-action-lift));
    left: calc(var(--safe-left) + 23px);
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
    width: auto;
    height: 55px;
    min-height: 55px;
    border-top: 1px solid var(--line);
  }

  .screen--question > .chrome > :first-child { justify-self: start; }
  .screen--question > .chrome > .icon-action { justify-self: center; }
  .screen--question > .chrome > :last-child { justify-self: end; }

  .question__dock {
    gap: 4px;
    padding-top: 8px;
  }

  .question__dock-copy { font-size: 10.5px; }

  /* Result / WHY 沿用 V1：重开在左、状态居中、声音在右。 */
  .chrome--late {
    position: relative;
    display: grid;
    grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr);
    height: 62px;
    min-height: 62px;
    margin-right: 3px;
    margin-left: 3px;
  }

  .chrome--late::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 82px;
    height: 1px;
    content: '';
    background: var(--line);
    transform: translateX(-50%);
  }

  .chrome--late > .text-action { justify-self: start; }
  .chrome--late > .chrome__status { justify-self: center; }
  .chrome--late > .icon-action { justify-self: end; }

  /* 保留 V1 的按钮宽度与 229:156 比例，只把整行贴近底部安全区。 */
  .screen--reveal {
    padding-bottom: calc(var(--safe-bottom) + 68px + var(--bottom-action-lift));
  }

  .screen.screen--reveal > .screen__footer--split {
    position: absolute;
    top: calc(100dvh - 68px - var(--bottom-action-lift) - var(--safe-bottom));
    right: calc(var(--safe-right) + 16px);
    left: calc(var(--safe-left) + 16px);
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 229fr) minmax(0, 156fr);
    gap: 13px;
    width: auto;
    height: 55px;
    padding: 0;
  }

  .screen.screen--reveal > .screen__footer--split > .primary-action,
  .screen.screen--reveal > .screen__footer--split > .secondary-action {
    width: 100%;
    height: 55px;
    min-height: 55px;
    padding: 0 18px;
    font-size: 15px;
  }

  /* WHY：V1 的证据层级，短屏保持同序压缩。 */
  .screen--evidence {
    padding-bottom: calc(var(--safe-bottom) + 68px + var(--bottom-action-lift));
  }

  .screen.screen--evidence > .screen__main {
    gap: 5px;
    padding-top: 6px;
  }

  .screen--evidence .evidence__origin-title {
    padding-left: 8px;
    border-left: 2px solid var(--tier-accent);
    font-size: 13px;
    line-height: 1.25;
  }

  .screen--evidence .evidence-hero__lead {
    flex: 0 0 auto;
    font-size: clamp(20px, 3.4dvh, 28px);
    line-height: 1.18;
  }

  .screen--evidence .evidence__summary {
    flex: 0 0 auto;
    display: -webkit-box;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .screen--evidence .evidence__list {
    flex: 0 0 auto;
    gap: 6px;
    overflow: visible;
  }

  .screen--evidence .evidence-item {
    grid-template-columns: clamp(50px, 8dvh, 72px) minmax(0, 1fr);
    min-height: clamp(60px, 9dvh, 82px);
    padding: 6px;
  }

  .screen--evidence .evidence-item .photo {
    width: clamp(50px, 8dvh, 72px);
  }

  .screen--evidence .evidence-item__copy h3 { font-size: 12px; }
  .screen--evidence .evidence-item__copy p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .screen--evidence .evidence-result__painting {
    width: clamp(58px, 10dvh, 90px);
  }

  .screen--evidence .evidence__note {
    flex: 0 0 auto;
    margin-top: auto;
    font-size: 9.5px;
    line-height: 1.3;
  }

  .screen.screen--evidence > .screen__footer {
    position: absolute;
    top: calc(100dvh - 68px - var(--bottom-action-lift) - var(--safe-bottom));
    right: calc(var(--safe-right) + 20px);
    left: calc(var(--safe-left) + 20px);
    z-index: 5;
    width: auto;
    height: 55px;
    padding: 0;
  }

  .screen.screen--evidence > .screen__footer > .primary-action {
    width: 100%;
    height: 55px;
    min-height: 55px;
    padding: 0 16px;
    font-size: 15px;
  }
}

@media (max-width: 719px) and (orientation: portrait) and (min-height: 860px) {
  /* 430×932：直接对齐 V1 WHY 参考帧。 */
  .screen.screen--evidence > .screen__main {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }

  .screen--evidence .evidence__origin-title,
  .screen--evidence .evidence-hero__lead,
  .screen--evidence .evidence__summary,
  .screen--evidence .evidence-item,
  .screen--evidence .evidence-result__painting,
  .screen--evidence .evidence__note {
    position: absolute;
    margin: 0;
  }

  .screen--evidence .evidence__origin-title {
    top: 188px;
    left: 20px;
    width: 390px;
    padding-left: 8px;
    font-size: 16px;
  }

  .screen--evidence .evidence-hero__lead {
    top: 238px;
    left: 20px;
    width: 390px;
    font-size: 30px;
    line-height: 1.24;
  }

  .screen--evidence .evidence__summary {
    top: 325px;
    left: 20px;
    display: block;
    width: 390px;
    overflow: visible;
    font-size: 15px;
    line-height: 1.55;
  }

  .screen--evidence .evidence__list { display: contents; }

  .screen--evidence .evidence-item {
    left: 20px;
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    width: 390px;
    height: 114px;
    min-height: 114px;
    padding: 10px 12px 10px 8px;
    gap: 16px;
  }

  .screen--evidence .evidence-item:nth-child(1) { top: 399px; }
  .screen--evidence .evidence-item:nth-child(2) { top: 532px; }

  .screen--evidence .evidence-item .photo {
    width: 94px;
    height: 94px;
  }

  .screen--evidence .evidence-item__copy h3 { font-size: 15px; }
  .screen--evidence .evidence-item__copy p {
    font-size: 12px;
    line-height: 1.45;
  }

  .screen--evidence .evidence-result__painting {
    top: 670px;
    left: 151px;
    width: 128px;
    height: 128px;
    pointer-events: auto;
  }

  .screen--evidence .evidence__note {
    top: calc(822px - var(--bottom-action-lift) - var(--safe-bottom));
    left: 20px;
    width: 390px;
    height: 15px;
    padding: 0;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    white-space: nowrap;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .artwork-lightbox__layer {
    padding:
      max(12px, var(--safe-top))
      max(28px, var(--safe-right))
      max(12px, var(--safe-bottom))
      max(28px, var(--safe-left));
  }

  .artwork-lightbox {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 0.82fr);
    grid-template-rows: auto auto auto;
    width: min(100%, 680px);
    padding: 0 56px 0 0;
    column-gap: 24px;
  }

  .artwork-lightbox__image {
    grid-column: 1;
    grid-row: 1 / 4;
    width: min(64dvh, 42vw, 300px);
    justify-self: center;
  }

  .artwork-lightbox__kicker,
  .artwork-lightbox h2,
  .artwork-lightbox__hint {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .artwork-lightbox__kicker { grid-row: 1; align-self: end; margin: 0 0 4px; }
  .artwork-lightbox h2 { grid-row: 2; align-self: center; margin: 0; }
  .artwork-lightbox__hint { grid-row: 3; align-self: start; margin: 7px 0 0; }
}

@media (max-width: 719px) and (orientation: portrait) and (max-height: 740px) {
  .envelope--dock { --env-w: min(34vw, 128px); }
}