/* =====================================================================
   reveries.cn · 明信片认证页 · card.css
   —— 由用户调好的成品页 reveries-card.html 直接搬入，数值一律照抄。

   与成品页的唯一结构差异：
     · 所有选择器都收在 #postcard 之下（避免污染其他页面 ——
       style.css 里已经有一个通用的 .card 规则，见 style.css:345）。
     · @keyframes 不能加作用域，统一改名 rev- 前缀。
   关键两条（成品页注释里写死的，别改）：
     ① .face 绝不能写 transform-style:preserve-3d —— Chrome 会因此忽略它的
        backface-visibility，两面同时画出来（满屏镜像字）。
     ② 透视只在「正在翻面」或「鼠标悬浮」时挂，平时是 none。
        常开会把字弄糊（实测细线墨宽 +15%~+19%）。
   ===================================================================== */

/* ── 页面根：光晕底的画布 ─────────────────────────────────────────── */
#postcard{
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
  /* 真实舞台底色（_gen/stage.css 的 .rv-stage 为 #0A0C0F），此处兜底 */
  background: #0A0C0F;
}

/* ── 真实舞台（三层：.irid 光晕 / .grain 噪点 / .flare 光斑）
      样式原样来自 app/static/stage.css（= _gen/stage.css）。 ── */

/* 站点外壳（skip-link / main）浮在舞台之上。
   header 已整体删除 —— 背景层上不放任何文字或链接。 */
#postcard .skip-link,
#postcard .auth-main{ position: relative; z-index: 2; }

/* ── 缩放壳：窄屏把 920×520 的卡片整体缩进屏幕（--fit 由 card.js 写入） ── */
#postcard .fit{ transform: scale(var(--fit, 1)); transform-origin: 50% 50%; }

/* ── 透视：随用随挂、用完摘掉（见本文件顶部 ②） ──────────────────── */
#postcard .holder{
  position: relative; z-index: 2;
  perspective: var(--persp, none);
  perspective-origin: 50% 50%;
}
#postcard .tilt3d{
  position: relative; transform-style: preserve-3d;
  transition: transform var(--tilt-dur, 280ms) cubic-bezier(.22, .7, .3, 1);
}
#postcard .tilt3d.tilting{ will-change: transform; }
#postcard .flip3d{
  position: relative; transform-style: preserve-3d; width: 920px; height: 520px;
  transition: transform 900ms cubic-bezier(.2, .75, .2, 1);
  cursor: pointer;
}
#postcard .flip3d.flipped{ transform: rotateY(180deg); }
#postcard .flip3d.axis-x.flipped{ transform: rotateX(180deg); }
/* 首帧直接翻到背面时禁掉过渡（card.js 的 add('noanim') → 改 transform → 取 offsetWidth → remove） */
#postcard .flip3d.noanim{ transition: none; }

/* ⚠ 别给 .face 加 transform-style:preserve-3d —— 会让 Chrome 忽略它的
   backface-visibility，两面同时画出来（背面反着压在正面上面）。 */
#postcard .face{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
#postcard .face.back{ transform: translate(-50%, -50%) rotateY(180deg); }
#postcard .flip3d.axis-x .face.back{ transform: translate(-50%, -50%) rotateX(180deg); }

/* ── 真能填的输入框 ──
   ⚠️⚠️ 这一条必须逐字对齐编辑器里的 .card .fld（reveries-card-editor.html:229）。
      少抄任何一条重置，全站样式就会从那道缝里漏进来 —— 已经栽过一次：

      漏了 border-radius:0 ⇒ style.css:124 的
        :where(a,button,input,…):focus-visible { border-radius: var(--r-sm) }
      就生效了（8px）。.fld 只画一条下边框，8px 圆角会把这条线的**两头往上卷**，
      看起来像根「两头翘的粗线」—— 而且因为那条规则挂在 :focus-visible 上，
      只在输入框拿到焦点时才现形。用户看到的就是「NAME 那栏的横线怪怪的」。

      漏了 margin:0 / box-shadow:none / height:auto / min-height:0 同理，
      任何一条被全站样式接管都会让输入框脱出明信片的比例。

   ⚠️ 选择器必须带 #postcard（= 1-1-0）。全站那套是 :where(…):focus-visible（0-1-0），
      光写 .fld（0-1-0）压不住。这也是它必须逐条声明、不能靠「反正没写」的原因。 */
#postcard .fld{
  display: block; width: 100%; height: auto; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0;
  background: transparent; color: inherit;
  font: inherit; letter-spacing: inherit; line-height: inherit;
  border-bottom: 1px solid currentColor;
  caret-color: currentColor; opacity: 1; box-shadow: none;
}
#postcard .fld::placeholder{ color: currentColor; opacity: .58; letter-spacing: inherit; }
#postcard .fld:focus{ opacity: 1; box-shadow: 0 1px 0 0 currentColor; }
#postcard .fld:-webkit-autofill{ -webkit-text-fill-color: currentColor; transition: background-color 9999s ease-out 0s; }
#postcard .fbtn{
  display: block; width: 100%; cursor: pointer; text-align: center;
  border: 1px solid currentColor; border-radius: 2px; padding: 5px 6px;
  background: transparent; color: inherit; font: inherit; letter-spacing: inherit;
  transition: background .18s, color .18s, opacity .18s;
}
/* hover 反白要用 --ink 记下原色，直接写 currentColor 会自己把颜色也改掉（白底白字） */
#postcard .fbtn:hover{ background: var(--ink); color: #fff; }
#postcard .fbtn:active{ transform: translateY(1px); }
#postcard .fbtn[disabled]{ cursor: default; opacity: .45; }
#postcard .fbtn b{ font-weight: 400; }

/* ── 「认出你」：登录态淡化不需要的栏 ─────────────────────────────────
   站点里登录和注册是同一张卡，靠 card.js 问 /api/auth/probe 决定摆哪副面孔。
   注册态（默认）：全亮。登录态：按「你点哪条路」淡另一条 ——
   点 EMAIL/CODE/GET CODE ⇒ PASSWORD 淡；点 PASSWORD ⇒ EMAIL/CODE/GET CODE 淡。
   NAME 栏**不参与淡化**，任何状态下都保持全亮（2026-10-15 用户要求「用户名不要渐隐」）。
   淡化的栏**照样能点能 Tab**（不写 pointer-events），点它自己就亮回来。

   🩸 必须 !important —— .it 的 opacity 是编辑器存档写进 style="" 的**内联样式**，
      类选择器（哪怕 #postcard 前缀）永远压不过内联。
   🩸 只改 opacity，别碰 transform —— .it 上还有存档的 rotate(-4deg)（烫银签名），
      动 transform 会跟它抢同一条属性。 */
#postcard .face.back .it[data-el="bfName"],
#postcard .face.back .it[data-el="bfMail"],
#postcard .face.back .it[data-el="bfCode"],
#postcard .face.back .it[data-el="bfBtn"],
#postcard .face.back .it[data-el="bfPass"]{ transition: opacity .3s cubic-bezier(.22, .7, .3, 1); }
#postcard .face.back .it.rv-dim{ opacity: .24 !important; }
/* 淡下去的那条路，连下划线也别那么实 —— .fld 的线是 currentColor，压 opacity 就够 */
#postcard .face.back .it.rv-dim .fld:hover,
#postcard .face.back .it.rv-dim .fbtn:hover{ opacity: .78; }

/* ── 烫银 / 烫金 / 玫瑰金 / 镭射 ──
   真·烫印是热压上去的一层平的金属箔，跟纸面齐平：没有凸起、没有白高光棱、
   也没有投影。所以这里只把一条金属渐变裁进字里。
   反光从卡片自己的倾角来 —— 亮带位置由 card.js 写进 --foil-x / --foil-y，
   卡片一倾斜，光就跟着滑过去。 */
#postcard .foil{
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-repeat: no-repeat; background-size: 165% 100%;
  background-position: var(--foil-x, 26%) var(--foil-y, 50%);
  transition: background-position var(--tilt-dur, 280ms) cubic-bezier(.22, .7, .3, 1);
}
#postcard .foil-silver{ background-image: linear-gradient(103deg, #93A0AE 0%, #D9E1E9 9%, #FFFFFF 18%, #A6B3C1 28%, #EDF2F7 38%, #86929F 50%, #E2E8EF 60%, #FFFFFF 70%, #98A5B3 82%, #C8D2DC 92%, #93A0AE 100%); }
#postcard .foil-gold{ background-image: linear-gradient(103deg, #9A7A2E 0%, #E8CC78 9%, #FFFBE6 18%, #C09A3C 28%, #F7E6AE 38%, #8E6E24 50%, #EDD79A 60%, #FFFCEF 70%, #A88A34 82%, #D8BC64 92%, #9A7A2E 100%); }
#postcard .foil-rose{ background-image: linear-gradient(103deg, #9A6A72 0%, #EBC3C9 9%, #FFF7F8 18%, #C99099 28%, #FBE3E6 38%, #8E6068 50%, #F0CFD4 60%, #FFFAFB 70%, #A87680 82%, #DDB6BD 92%, #9A6A72 100%); }
#postcard .foil-holo{ background-image: linear-gradient(103deg, #7FC8F0 0%, #B79BF0 12%, #FF9AD4 25%, #FFD06A 38%, #6FE0B4 52%, #7FC8F0 66%, #B79BF0 80%, #FF9AD4 92%, #7FC8F0 100%); }

/* keyframes 不能加作用域 → 改名 rev- 前缀 */
@keyframes rev-shakeX{
  0%, 100%{ translate: 0 0; } 12%{ translate: -5px 0; } 26%{ translate: 5px 0; }
  40%{ translate: -4px 0; } 55%{ translate: 4px 0; } 72%{ translate: -2px 0; } 88%{ translate: 2px 0; }
}
#postcard .shake{ animation: rev-shakeX .46s cubic-bezier(.36, .07, .19, .97) both; }

/* ── 提示条 / 吐司 ── */
#postcard .fliphint,
#postcard .toastbar{
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 9;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em;
  color: #fff; background: rgba(10, 14, 20, .55); border: 1px solid rgba(255, 255, 255, .2);
  padding: 6px 15px; border-radius: 999px; backdrop-filter: blur(6px);
  pointer-events: none; transition: opacity .45s;
}
#postcard .fliphint{ bottom: 24px; }
#postcard .toastbar{ top: 24px; opacity: 0; }

/* ── 卡片本体（成品页 .card，数值原样） ── */
#postcard .card{
  position: relative; overflow: hidden;
  width: 920px; height: 520px; max-width: none; padding: 0;
  background: #ffffff;                 /* 用户存档里改过的底色 */
  border-radius: 2px;
  border: none;                        /* borderW = 0 */
  box-shadow: 0 44px 80px -27px rgba(4, 16, 38, .42);
}
/* 背面卡片同时就是 <form class="auth-card">：中和 style.css 里 .auth-card 的
   400px 面板样式（#postcard .card 更高特异性，保证卡片仍是 920×520）。 */
#postcard .card.auth-card{ display: block; }

#postcard .card .pat{
  position: absolute; inset: 0; pointer-events: none;
  opacity: 1; background-image: none; background-size: auto; background-repeat: repeat;
}
#postcard .card .it{ position: absolute; z-index: 4; white-space: pre-wrap; word-break: break-word; }
#postcard .card .ln{ position: absolute; z-index: 2; }
#postcard .card .cr{ position: absolute; z-index: 3; }
#postcard .card .gl{
  position: absolute; z-index: 1; left: 29%; top: 20%; width: 62%;
  font-family: "Caveat", cursive; font-size: 168px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; text-align: center;
  transform: rotate(-4deg); opacity: 1;
  background: linear-gradient(178deg, #FFFFFF 8%, #8FBCEF 44%, #FFFFFF 58%, #8FBCEF 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.6px rgba(255, 255, 255, .55);
  filter: blur(0.4px) drop-shadow(0 7px 11px rgba(70, 130, 215, 0.45));
  pointer-events: none;
}
#postcard .card .dec{ position: absolute; }
#postcard .card .pat{ z-index: 0; }

/* ── 表单错误：保留 role=alert，就位在背面卡片里（页面级的 .form-error 样式在这里被中和） ── */
#postcard .form-error{
  position: absolute; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0;
  color: #A81F32;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 9px; font-weight: 400; letter-spacing: .06em; line-height: 1.5;
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce){
  #postcard .foil{ transition: none; }
  #postcard .flip3d,
  #postcard .tilt3d{ transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   窄屏（<=48rem）：不做 3D 翻面，也不等比缩小整张卡
   ─────────────────────────────────────────────────────────────────────
   为什么废弃「920×520 整张 scale」：390px 宽时 fit≈0.389，卡片上 11px 的
   字实际只剩 4.3px，手机上根本读不了。

   改法：**同一份 DOM**（_postcard.html 不变，字段名不会分叉）＋两套 CSS。
   窄屏把 3D 外壳（透视 / 倾斜 / 翻面 / 缩放）与卡片内的绝对定位统统拆掉，
   只渲染背面表单，让它落回常规流：宽度撑满、字段纵向堆叠、字号提到移动档。
   桌面端（>48rem）完全不进这个 media query，渲染一个像素都不动。
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 48rem){

  /* ── 1. 拆掉 3D 外壳：翻面 / 透视 / 倾斜 / 缩放退化为普通块 ── */
  #postcard{ overflow: visible; }                       /* 窄屏允许纵向滚动 */
  #postcard .fit{ width: 100%; transform: none !important; }
  #postcard .holder{ width: 100%; perspective: none !important; }
  #postcard .tilt3d{ width: 100%; transform: none !important; transition: none; }
  #postcard .flip3d{
    width: 100%; height: auto;
    transform: none !important; transition: none; cursor: auto;
  }
  #postcard .face{
    position: static; left: auto; top: auto; width: 100%;
    transform: none !important;
    -webkit-backface-visibility: visible; backface-visibility: visible;
  }
  /* 窄屏不要正面 —— 也就彻底不存在「两面同时渲染」 */
  #postcard .face.front{ display: none; }

  /* ── 2. 背面卡片落回常规流：白底 / 描边 / 圆角 / 投影沿用卡片语汇 ── */
  #postcard .face.back > .card{
    width: 100% !important; height: auto !important;   /* 压掉行内 920×520 */
    max-width: 30rem; margin: 0 auto;
    padding: var(--s5) !important;
    display: grid; grid-template-columns: 1fr auto;
    column-gap: var(--s3); row-gap: var(--s4);
    align-items: start;
  }

  /* 绝对定位的装饰（底纹 / 对分线 / 十字 / 图形 / 玻璃字）不进流 */
  #postcard .face.back > .card > .pat,
  #postcard .face.back > .card > .ln,
  #postcard .face.back > .card > .cr,
  #postcard .face.back > .card > .dec,
  #postcard .face.back > .card > .gl{ display: none !important; }

  /* 所有文字块退出绝对定位 → 按 DOM 顺序纵向堆叠 */
  #postcard .face.back > .card > *{ grid-column: 1 / -1; min-width: 0; }
  #postcard .face.back > .card > .it{
    position: static; width: auto !important; text-align: left;
    font-size: 14px !important; line-height: 1.6 !important;
  }

  /* 顶栏：品牌 + 授权卡标签同一行 */
  #postcard .face.back > .card > .it[data-el="bb"]{
    grid-column: 1; font-size: 16px !important; letter-spacing: -.01em !important;
  }
  #postcard .face.back > .card > .it[data-el="btag"]{
    grid-column: 2; justify-self: end; text-align: right;
  }
  #postcard .face.back > .card > .it[data-el="bslo"]{
    font-size: 20px !important; line-height: 1.3 !important; letter-spacing: .02em !important;
  }
  /* 窄屏收起「说明书式」的絮语与烫银花体，只留卡片骨架 + 表单 */
  #postcard .face.back > .card > .it[data-el="bdesc"],
  #postcard .face.back > .card > .it[data-el="bnote"],
  #postcard .face.back > .card > .it[data-el="bsign"]{ display: none; }

  /* ── 3. 表单控件：移动端可读 + 可点 ── */
  #postcard .face.back .fld{
    font-size: 16px;                 /* <16px 在 iOS 上会触发自动放大（见 style.css:746） */
    min-height: 2.75rem;             /* 44px 触控目标 */
    padding: .5rem 0;
    letter-spacing: .06em;
  }
  #postcard .face.back .fbtn{
    font-size: 14px;
    min-height: 2.75rem;             /* 44px 触控目标 */
    padding: .55rem .75rem;
  }
  #postcard .face.back .form-error{
    position: static; width: auto !important;
    font-size: 14px !important; line-height: 1.5 !important;
    padding-left: var(--s2); border-left: 2px solid currentColor;
  }

  /* ── 4. 页面骨架 ── */
  #postcard .auth-main{ display: block; padding: var(--s4); }
  #postcard .fliphint{ display: none; }                /* 窄屏没有翻面这回事 */

  /* skip-link 回到绝对定位。本文件开头为了压住光晕给它写了 position:relative，
     于是它成了 #postcard 这个纵向 flex 的在流子项 → 被拉伸到整行宽，
     再叠加 left:var(--s4) 就正好多吃 16px，窄屏一放开 overflow 就冒出横向滚动条。
     宽屏下它被 #postcard 的 overflow:hidden 裁掉、且 left 偏移同样不可见，故不改宽屏。 */
  #postcard .skip-link{ position: absolute; }
}