/* ================= 0. 门禁 · 维的桌面档案夹 ================= */
/* 门禁页白底 */
body.is-gate {
  --bg: #ffffff; --bg-2: #f4f5f7; --fg: #141824; --fg-2: #3a4352; --dim: #7a8494;
  --line: rgba(20, 24, 36, .12); --line-2: rgba(20, 24, 36, .28);
  background: #fff; color: var(--fg);
}
body.is-gate #smoke, body.is-gate #grain { display: none; }

/* 线索便签的手写体（用户购买的 Zusttora，Inviline） */
@font-face {
  font-family: 'Zusttora';
  src: url('../assets/fonts/zusttora.woff2') format('woff2');
  font-display: swap;
}
.desk {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 44px 16px 36px;
}
.desk__kicker {
  position: absolute; top: 18px; left: var(--gutter); margin: 0;
  font-size: 10px; letter-spacing: .3em; color: var(--dim);
}
.desk__stage {
  position: relative;
  width: min(94vw, calc((100svh - 150px) * 1290 / 1374), 980px);
  aspect-ratio: 1290 / 1374;
  container-type: inline-size;
  user-select: none; -webkit-user-select: none;
}
.desk__base { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- 左边白纸：欢迎信 ---- */
.letter {
  position: absolute; z-index: 1; box-sizing: border-box;
  padding: 6.2cqw 4.6cqw 4cqw;
  background: linear-gradient(160deg, #eef0f4, #e6e8ee);
  box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .28), 0 1.6cqw 3cqw rgba(0, 0, 0, .18);
  color: #1d222c;
  touch-action: none; cursor: grab;
}
.letter.is-gone { visibility: hidden; }
.lt__layer { position: absolute; inset: 0; padding: inherit; transition: opacity .12s; }
.lt__layer > * { transform-origin: 50% 0; will-change: filter, transform; }
.lt__title { font-family: var(--f-display); font-weight: 300; font-style: italic; font-size: 3.1cqw; margin: 0 0 2.6cqw; letter-spacing: .01em; }
.lt__greet { font-family: 'Crimson Pro', var(--f-body); font-style: italic; font-size: 1.62cqw; margin: 0 0 1.4cqw; }
.lt__p, .lt__closing, .lt__off {
  font-family: 'Crimson Pro', var(--f-body); font-size: 1.5cqw; line-height: 1.5; margin: 0 0 1.25cqw;
  text-align: justify; hyphens: auto;
}
.lt__closing { margin-top: 2cqw; margin-bottom: .2cqw; text-align: left; }
.lt__sig {
  font-family: 'Crimson Pro', var(--f-body); font-size: 1.9cqw; margin: .2cqw 0 0; line-height: 1.35;
  color: #0b1230; letter-spacing: .02em;
}
.lt__off { font-family: var(--f-mono); font-size: .95cqw; letter-spacing: .14em; text-transform: uppercase; color: #4d5666; text-align: left; }
.lt--zh { opacity: 0; pointer-events: none; }
.lt--zh .lt__title { font-family: var(--f-body); font-style: normal; font-weight: 600; font-size: 2.5cqw; }
.lt--zh .lt__greet, .lt--zh .lt__p, .lt--zh .lt__closing { font-family: var(--f-body); font-style: normal; font-size: 1.42cqw; line-height: 1.75; }
.lt--zh .lt__sig { font-family: var(--f-body); font-size: 1.6cqw; }
.letter.is-flash .lt--en { opacity: 0; }
.letter.is-flash .lt--zh { opacity: 1; animation: lt-flash 1s steps(1) both; }
@keyframes lt-flash {
  0% { transform: translateX(.35cqw); filter: contrast(1.6); }
  6% { transform: translateX(-.2cqw); }
  12%, 88% { transform: none; filter: none; }
  94% { transform: translateX(.25cqw); filter: contrast(1.6); }
}

/* ---- 揉纸团 ---- */
.crumple__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; visibility: hidden; }
.crumple__hit {
  position: absolute; top: 0; left: 0; z-index: 7; padding: 0; margin: 0; border: 0; background: transparent;
  touch-action: none; cursor: grab; display: none; outline: none;
}
.desk__stage[data-crumple="holding"] .crumple__hit { cursor: grabbing; }
.desk__stage[data-crumple]:not([data-crumple="restored"]) .crumple__canvas { visibility: visible; }
.desk__stage[data-crumple]:not([data-crumple="restored"]) .crumple__hit { display: block; }
.crumple__hit:focus-visible { outline: 1px dashed var(--klein-glow); outline-offset: 4px; }
/* 纸被揉走时，钉在它上面的图钉和那段线也掉了 */
.pin--0, .thread .t0 { transition: opacity .35s, transform .5s var(--ease); }
.desk__stage[data-crumple]:not([data-crumple="restored"]) .pin--0 { opacity: 0; transform: translate(-50%, 40%) scale(.7); }
.desk__stage[data-crumple]:not([data-crumple="restored"]) .thread .t0 { opacity: 0; }

/* ---- 克莱因蓝便签 ---- */
.desk__note { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 .5cqw .8cqw rgba(0, 0, 0, .35)); }
.note__ink {
  position: absolute; z-index: 2; margin: 0; width: 21cqw;
  transform: translate(-50%, -50%) rotate(-4.54deg);
  font-family: 'Zusttora', 'Crimson Pro', var(--f-body); font-weight: 400; font-size: 6.6cqw; line-height: 1.1;
  color: #f1f3f8; text-align: center; pointer-events: none; -webkit-text-stroke: .02em #f1f3f8;
}

/* ---- 线 + 图钉 ---- */
.thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: visible; }
.thread path { fill: none; vector-effect: non-scaling-stroke; }
.thread__line { stroke: #b3161b; stroke-width: 1.3; }
.thread__shadow { stroke: rgba(0, 0, 0, .45); stroke-width: 1.6; transform: translate(4px, 6px); filter: blur(1px); }
.pin {
  position: absolute; z-index: 9; width: 2.75%; transform: translate(-50%, -50%); pointer-events: none;
  filter: drop-shadow(.25cqw .4cqw .3cqw rgba(0, 0, 0, .55));
}

/* ---- 黑板上的物件 ---- */
.obj {
  position: absolute; z-index: 3; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  transform: rotate(var(--rot)); transform-origin: 50% 50%;
  filter: drop-shadow(0 .45cqw .5cqw rgba(0, 0, 0, .6));
  transition: transform .45s var(--ease), filter .45s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.obj > img { display: block; width: 100%; height: auto; pointer-events: none; }
.obj:hover, .obj:focus-visible { transform: rotate(var(--rot)) translateY(-.5cqw) scale(1.025); filter: drop-shadow(0 1.4cqw 1.2cqw rgba(0, 0, 0, .6)); z-index: 5; }
.obj:focus-visible { outline: 1px dashed var(--klein-glow); outline-offset: 6px; }
.obj.is-lifted { visibility: hidden; }
.obj--pen { z-index: 4; }

/* 物件里的字：都按物件自身宽度算（拿起来放大也不变形） */
.obj--clue, .obj--kraft { container-type: inline-size; }
.lift__tilt.obj--clue, .lift__tilt.obj--kraft { container-type: inline-size; position: relative; }
.clue__ink {
  position: absolute; left: 9%; right: 7%; top: 22%;
  font-family: 'Zusttora', 'Homemade Apple', var(--f-hand); color: rgba(30, 24, 18, .9); font-size: 9cqw; line-height: 1.22;
  -webkit-text-stroke: .018em rgba(30, 24, 18, .75);
  filter: blur(.25px);
}
.clue__ink p { margin: 0 0 1.6cqw; transform: rotate(calc(-1.6deg + var(--i) * 1.4deg)) translateX(calc(var(--i) * 2cqw)); }
/* 每个字母各歪各的 */
.clue__ink .w, .note__ink .w { display: inline-block; white-space: nowrap; }
.clue__ink .c, .note__ink .c { display: inline-block; transform: translateY(var(--y)) rotate(var(--r)) scale(var(--s)); opacity: var(--o); }
.clue__ink p:first-child { opacity: .9; }
.clue__ink p:last-child { opacity: .72; }
.kraft__ink {
  position: absolute; left: 14%; top: 18%;
  font-family: 'Homemade Apple', var(--f-hand); font-weight: 400; font-size: 21cqw; line-height: 1;
  color: rgba(22, 16, 12, .86); transform: rotate(-6deg); filter: blur(.4px);
  mix-blend-mode: multiply;
}

/* ---- 证件 ---- */
.obj--card, .lift__card { aspect-ratio: 1000 / 630; }
.idc {
  container-type: inline-size;
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 1.6cqw;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 .55cqw, rgba(27, 44, 193, .045) .55cqw .7cqw) 0 0 / 3.4cqw 3.4cqw,
    linear-gradient(180deg, #fbfcfe, #eef1f7);
  color: #0d1a44; text-align: center;
}
.obj--card .idc { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); }
.idc__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.idc__frame rect { fill: none; stroke: #0d1a44; stroke-width: 2.4; }
.idc__frame rect.chain { stroke-width: 9; stroke-dasharray: 3 5; stroke: #1b2cc1; opacity: .85; }
.idc__wm {
  position: absolute; left: 0; right: 0; top: 30%;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 34cqw; line-height: .8; letter-spacing: 6cqw;
  color: rgba(27, 44, 193, .18); pointer-events: none;
}
.idc__banner {
  position: absolute; left: 11%; right: 11%; top: 7.5%; padding: 1.3cqw 2cqw 1.5cqw;
  background: #0d1a44; color: #f4f6fb; border-radius: 1.2cqw;
  box-shadow: 0 0 0 .4cqw #fbfcfe, 0 0 0 .7cqw #0d1a44;
}
.idc__banner::before, .idc__banner::after {
  content: ''; position: absolute; top: 50%; width: 4.4cqw; height: 4.4cqw; margin-top: -2.2cqw;
  border: .55cqw solid #0d1a44; border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent;
}
.idc__banner::before { left: -5.2cqw; transform: rotate(-45deg); }
.idc__banner::after { right: -5.2cqw; transform: rotate(135deg); }
.idc__banner b { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 3.7cqw; white-space: nowrap; letter-spacing: .06em; line-height: 1.05; }
.idc__banner span { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 2.9cqw; white-space: nowrap; letter-spacing: .1em; line-height: 1.15; }
.idc__sub { position: absolute; left: 0; right: 0; top: 29.5%; margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 2.3cqw; color: #24346e; }
.idc__seal { position: absolute; top: 35.5%; width: 19%; aspect-ratio: 1; }
.idc__seal--l { left: 10%; }
.idc__seal--r { right: 10%; }
.idc__fields {
  position: absolute; left: 34%; right: 34%; top: 38%;
  display: flex; flex-direction: column; gap: .7cqw; text-align: left;
  font-family: var(--f-mono); font-size: 1.7cqw; line-height: 1.15; color: #0d1a44;
}
.idc__fields small { display: block; font-size: 1.15cqw; letter-spacing: .08em; color: #50608f; }
.idc__text { position: absolute; left: 7%; right: 7%; bottom: 7.5%; font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #0d1a44; }
.idc__text p { margin: 0; font-size: 1.85cqw; white-space: nowrap; letter-spacing: .03em; line-height: 1.3; }
.idc__text .idc__title { font-family: var(--f-display); font-weight: 500; font-size: 4.4cqw; letter-spacing: .32em; line-height: 1.15; margin: .2cqw 0; }

.idc--back { text-align: left; }
.idc__backtext {
  position: absolute; left: 8.5%; width: 44%; top: 12%; margin: 0;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 2.02cqw; line-height: 1.3;
  text-transform: uppercase; text-align: left; color: #111827;
}
.idc__sign { position: absolute; left: 8.5%; width: 40%; top: 64%; text-align: center; }
.idc__sig {
  position: absolute; left: 0; right: 0; bottom: 1.2cqw;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 3.4cqw; line-height: 1; letter-spacing: .04em; color: #050a1f;
}
.idc__sign i { display: block; height: .55cqw; background: #050a1f; }
.idc__sign small { display: block; margin-top: 1.4cqw; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 2.1cqw; letter-spacing: .08em; color: #111827; }
.idc__order {
  position: absolute; left: 8.5%; width: 46%; top: 79%; margin: 0;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 2.15cqw; line-height: 1.3; letter-spacing: .03em; color: #111827;
}
.idc__photo { position: absolute; left: 58%; top: 15%; width: 15%; height: 37%; background: #050608; overflow: hidden; }
.idc__photo .art, .idc__photo svg, .idc__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idc__vline { position: absolute; left: 82%; top: 14%; bottom: 13%; width: 6%; }
.idc__vline i { position: absolute; right: 0; top: 0; bottom: 0; width: .6cqw; background: #050a1f; }
.idc__vline small {
  position: absolute; right: 1.6cqw; top: 50%; transform: translate(50%, -50%) rotate(-90deg); transform-origin: 50% 50%;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 2cqw; letter-spacing: .08em; white-space: nowrap; color: #111827;
}
.idc__issued { position: absolute; left: 58%; top: 56%; margin: 0; font-family: var(--f-mono); font-size: 1.25cqw; letter-spacing: .1em; color: #50608f; }

/* ---- 拿起来 ---- */
.lift { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 16px; }
.lift__back { position: absolute; inset: 0; background: rgba(250, 251, 252, .9); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: zoom-out; }
.lift__item { position: relative; margin: 0; z-index: 1; filter: drop-shadow(0 26px 34px rgba(10, 14, 24, .38)); }
.lift--card .lift__item { width: min(620px, 90vw); }
.lift--gun .lift__item { width: min(760px, 92vw); }
.lift--clue .lift__item { width: min(680px, 92vw); }
.lift--kraft .lift__item { width: min(520px, 86vw); }
.lift--pen .lift__item { width: min(78px, 16vw); }
.lift__tilt { position: relative; transition: transform .25s var(--ease); transform-style: preserve-3d; }
.lift__tilt img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.lift--pen .lift__tilt { transform: rotate(8deg); }
.lift__cap {
  position: relative; z-index: 1; margin: 0; text-align: center;
  font-size: 11px; letter-spacing: .2em; color: var(--fg-2); pointer-events: none;
}
.lift__cap span { color: var(--fg); }
.lift__cap em { display: block; margin-top: 6px; font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--dim); }
.lift__put {
  position: relative; z-index: 1;
  padding: 6px 18px; background: none; border: 1px solid var(--line-2); color: var(--fg-2);
  font-size: 11px; letter-spacing: .3em; cursor: pointer;
}
.lift__put:hover { color: var(--fg); border-color: var(--fg-2); }

/* 翻转卡 */
.fc { position: relative; cursor: grab; touch-action: pan-y; outline: none; }
.fc[data-dragging] { cursor: grabbing; }
.fc:focus-visible { outline: 1px dashed var(--klein-glow); outline-offset: 8px; }
.fc__rotor { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.fc__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 1.6cqw; overflow: hidden; }
.fc__back { transform: rotateY(180deg); }
.fc__shadow {
  position: absolute; left: 8%; right: 8%; bottom: -7%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(6px); pointer-events: none;
}
.fc__glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--fc-gx, 50%) var(--fc-gy, 50%), rgba(255, 255, 255, .5), transparent 55%);
  mix-blend-mode: soft-light; opacity: calc(var(--fc-sheen, 0) * .55); transition: opacity .3s;
}
.lift__tilt .fc__glare { mix-blend-mode: screen; opacity: calc(var(--fc-sheen, 0) * .18); }
.lift--pen .fc__glare, .lift--gun .fc__glare { display: none; }

/* ---- 验证 ---- */
.desk__auth { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.desk__stage::after {
  content: ''; position: absolute; left: 0; right: 0; top: -12%; height: 12%; z-index: 10; pointer-events: none;
  background: linear-gradient(transparent, rgba(47, 91, 255, .28), transparent); opacity: 0;
}
.desk__stage.is-scanning::after { opacity: 1; animation: desk-scan 1.6s linear; }
@keyframes desk-scan { from { top: -12%; } to { top: 100%; } }

@media (max-width: 640px) {
  .desk { padding-top: 40px; gap: 14px; }
  .desk__kicker { left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .obj, .lift__tilt { transition: none; }
}
.gate__status { min-height: 1.6em; font-size: 12px; color: var(--fg-2); margin: 0; text-align: center; }
.gate__egg { position: fixed; right: 14px; bottom: 10px; font-size: 9px; color: var(--dim); opacity: .35; margin: 0; letter-spacing: .14em; }