/* ---------- Mặt bàn ---------- */
.stage{position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));min-height:560px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%,rgba(255,236,200,.75),transparent 70%),
    radial-gradient(circle at 12% 88%,rgba(125,140,106,.18),transparent 32%),
    linear-gradient(180deg,#e2d4bb,#d6c4a6);
  transition:background .8s}
.stage:before{content:'';position:absolute;inset:0;opacity:.22;pointer-events:none;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.desk-light{position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(circle at 50% 35%,var(--mood-glow,rgba(255,214,150,.35)),transparent 45%);transition:background 1s;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{opacity:.75}}
body.reading .stage{position:relative;top:0;height:calc(100vh - var(--topbar))}
.caption{position:absolute;top:18px;left:0;right:0;text-align:center;margin:0;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6e5d4d;z-index:3;padding:0 16px}
.hint{position:absolute;bottom:22px;left:0;right:0;text-align:center;margin:0;font-size:13.5px;color:#5c4c40;z-index:3;padding:0 16px;transition:opacity .3s;min-height:20px}
.hint b{font-weight:500;color:var(--wine)}
.scene{position:relative;width:100%;flex:1;display:grid;place-items:center;perspective:1600px;z-index:2}
.view{position:absolute;inset:0;display:grid;place-items:center;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.view.scroll{display:block;overflow:auto;padding:56px 16px 110px}
.view.scroll>.sheet,.read-wrap .sheet{margin:0 auto}
.read-wrap{perspective:1400px}
.read-wrap .back-side{cursor:pointer}

/* ---------- Tờ thư ---------- */
.sheet{--w:440px;--ink-color:#2f2723;position:relative;width:var(--w);min-height:580px;padding:46px 46px 40px;color:var(--ink-color);
  background-color:#fffaf0;box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px rgba(60,40,20,.18);font-family:var(--letter-font,var(--serif));transform-origin:50% 50%}
.sheet.p-ivory{background-color:#fffaf0}
.sheet.p-lined{background-color:#fffdf6;background-image:linear-gradient(90deg,transparent 34px,rgba(206,90,80,.35) 34px,rgba(206,90,80,.35) 35px,transparent 35px),repeating-linear-gradient(transparent 0 27px,rgba(110,140,180,.28) 27px 28px);background-position:0 0,0 18px}
.sheet.p-rough{background-color:#f2eadb;background-image:radial-gradient(rgba(94,74,42,.16) .6px,transparent .8px),radial-gradient(rgba(255,255,255,.7) .6px,transparent .8px);background-size:7px 7px,11px 11px;background-position:0 0,3px 2px}
.sheet.p-aged{background-color:#f3e2c0;background-image:radial-gradient(ellipse at 15% 8%,rgba(140,95,40,.16),transparent 35%),radial-gradient(ellipse at 90% 92%,rgba(120,75,30,.14),transparent 38%),radial-gradient(ellipse at 70% 30%,rgba(160,110,50,.06),transparent 30%)}
.sheet.p-grid{background-color:#fffef8;background-image:linear-gradient(rgba(120,150,180,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,180,.24) 1px,transparent 1px);background-size:18px 18px}
.sheet.p-blush{background-color:#fdf0ea;background-image:radial-gradient(circle at 85% 12%,rgba(230,150,140,.18),transparent 30%)}
.sheet-date{font:400 12px var(--mono);letter-spacing:.06em;color:color-mix(in srgb,var(--ink-color) 80%,transparent);text-align:right;margin-bottom:26px}
.sheet-to{font-size:1.45em;line-height:1.2;margin-bottom:18px;font-style:italic}
.sheet-msg{font-size:var(--msg-size,17px);line-height:1.75;white-space:pre-wrap;word-wrap:break-word}
.sheet-close{margin-top:26px;text-align:right;font-style:italic;font-size:1.05em}
.sheet-sign{display:flex;justify-content:flex-end;margin-top:4px;min-height:60px}
.sheet-sign svg{width:190px;height:72px;overflow:visible}
.sheet-sign .typed{font:400 40px var(--sign);line-height:1.3}
.sheet-name{text-align:right;font:400 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.sheet.f-hand{--letter-font:var(--hand)}.sheet.f-hand .sheet-msg{font-size:calc(var(--msg-size,17px) + 2px)}
.sheet.f-script{--letter-font:var(--script)}.sheet.f-script .sheet-msg{font-size:calc(var(--msg-size,17px) + 3px)}
.sheet.f-serif{--letter-font:var(--serif)}
.sheet.f-type{--letter-font:var(--mono)}.sheet.f-type .sheet-msg{font-size:calc(var(--msg-size,17px) - 2px)}
.sheet.back-side{background-image:none!important}
.sheet.back-side>*{opacity:.07;filter:blur(.6px);transform:scaleX(-1)}

/* Mực hiện dần khi người nhận đọc */
.ink-reveal .sheet-msg .w{opacity:0;filter:blur(2px);animation:ink .7s ease forwards}
@keyframes ink{to{opacity:1;filter:none}}
.sign-draw path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:sign 1.8s ease forwards var(--delay,0s)}
@keyframes sign{to{stroke-dashoffset:0}}

/* ---------- Gấp thư ---------- */
.fold-host{position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.fold-root{position:relative;transform-style:preserve-3d}
.panel3d{position:absolute;left:0;width:100%;transform-style:preserve-3d}
.panel3d>.face,.panel3d>.backface{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.panel3d>.face>.sheet{position:absolute;left:0;box-shadow:none}
.panel3d>.backface{transform:rotateX(180deg);background:var(--back-paper,#f7efe0)}
.panel3d>.backface:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),transparent 40%)}
.panel3d>.face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(60,40,20,var(--shade,0)),rgba(60,40,20,calc(var(--shade,0)*.3)))}
.fold-root.shadowed{filter:drop-shadow(0 14px 18px rgba(60,40,20,.22))}
.crease{position:absolute;left:-8px;right:-8px;height:0;border-top:2px dashed rgba(158,59,51,.65);pointer-events:none;animation:creaseIn .3s ease both}
@keyframes creaseIn{from{transform:scaleX(0)}}
.gesture{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:5}
.gesture.off{pointer-events:none;cursor:default}

/* Cuộn tròn */
.roll-wrap{position:relative}

.roll-tube{position:absolute;left:-6px;right:-6px;height:var(--tube,14px);border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,#e9dcc4 0%,#fffaf0 35%,#efe2c9 60%,#c9b38f 100%);box-shadow:0 6px 10px rgba(60,40,20,.2)}
.ribbon{position:absolute;left:50%;width:28px;margin-left:-14px;pointer-events:none;opacity:0;transition:opacity .4s}
.ribbon.show{opacity:1}

/* Thư tam giác */
.tri-wrap{position:relative;filter:drop-shadow(0 14px 16px rgba(60,40,20,.2))}

.tri-lines{position:absolute;inset:0;pointer-events:none;overflow:visible}
.tri-lines path{fill:none;stroke:rgba(110,80,50,.35);stroke-width:1.2}
.tri-flap{position:absolute;inset:0;pointer-events:none;overflow:visible}

/* Người nhận */
.packet{position:absolute;transition:transform .9s cubic-bezier(.25,.8,.25,1);transform-style:preserve-3d;touch-action:none}
.packet.dragging{transition:none}
.enclosure{position:absolute;z-index:6;transition:transform 1.2s cubic-bezier(.2,.9,.3,1.1),opacity .4s;cursor:zoom-in;filter:drop-shadow(0 8px 10px rgba(60,40,20,.25))}
.enclosure.big{cursor:zoom-out}
.reader-bar{position:absolute;bottom:56px;left:0;right:0;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;z-index:6;padding:0 16px;animation:rise .6s ease both}
.reader-bar .btn.ghost{background:rgba(255,250,240,.7)}
.hold-ring{position:absolute;inset:-10px;pointer-events:none}
.hold-ring circle{fill:none;stroke:rgba(255,255,255,.9);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.countdown{position:absolute;top:56px;left:0;right:0;text-align:center;z-index:4;font-family:var(--serif)}
.countdown b{display:block;font:500 clamp(26px,4vw,40px) var(--mono);letter-spacing:.04em;color:var(--ink)}
.countdown span{font-size:14px;color:#5c4c40}
.not-found{max-width:420px;text-align:center;font-family:var(--serif);font-size:18px;color:var(--ink);padding:16px}