/* ひらく手紙: 封筒・受け取る画面・送る画面 */
.tg-env{--w:min(78vw,330px);position:relative;width:var(--w);height:calc(var(--w)*.7);margin:0 auto;perspective:900px}
.tg-env>*{position:absolute;inset:0;border-radius:10px}
.tg-back{background:var(--flap);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.tg-letter{inset:7% 7% 6%;background:var(--paper);border-radius:6px;z-index:2;transition:transform .9s cubic-bezier(.2,.8,.2,1);box-shadow:0 2px 6px rgba(0,0,0,.12);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:9%;color:var(--acc);overflow:hidden}
.tg-letter b{font:italic 600 clamp(17px,5.2vw,22px)/1.2 Georgia,"Times New Roman",serif}
.tg-letter i{display:block;width:60%;height:2px;margin:8px auto;background:repeating-linear-gradient(90deg,var(--acc) 0 6px,transparent 6px 10px);opacity:.35}
.tg-pocket{z-index:3;background:var(--env);clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:7%}
.tg-pocket:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49.6%,rgba(0,0,0,.07) 50%,transparent 50.4%),linear-gradient(to bottom left,transparent 49.6%,rgba(0,0,0,.07) 50%,transparent 50.4%);pointer-events:none}
.tg-to{position:relative;z-index:1;font:600 clamp(15px,4.6vw,19px)/1.3 "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;color:var(--ink);background:rgba(255,255,255,.72);padding:4px 14px;border-radius:999px;max-width:86%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-flap{z-index:4;height:52%;background:var(--flap);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .75s cubic-bezier(.4,.1,.3,1);border-radius:10px 10px 0 0;filter:drop-shadow(0 3px 2px rgba(0,0,0,.12))}
.tg-seal{z-index:5;inset:auto;left:50%;top:52%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;transition:opacity .3s}
.tg-seal svg{width:100%;height:100%;overflow:visible}
.tg-seal .h{transition:transform .9s cubic-bezier(.3,.1,.4,1),opacity .9s}
.tg-sticker{z-index:5;inset:auto;left:50%;top:52%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:opacity .25s}
.tg-env.cracked .tg-seal .h1{transform:translate(-26px,60px) rotate(-38deg);opacity:0}
.tg-env.cracked .tg-seal .h2{transform:translate(28px,64px) rotate(42deg);opacity:0}
.tg-env.cracked .tg-seal .crack{opacity:1}
.tg-env.open .tg-flap{transform:rotateX(180deg)}
.tg-env.open .tg-sticker{opacity:0}
.tg-env.up .tg-letter{transform:translateY(-58%)}
.tg-env.locked{animation:none}
.tg-env.shake{animation:tgShake .45s}
@keyframes tgShake{20%{transform:translateX(-7px) rotate(-1.5deg)}40%{transform:translateX(6px) rotate(1.5deg)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes tgFloat{50%{transform:translateY(-6px)}}
.tg-env.idle{animation:tgFloat 2.6s ease-in-out infinite}

/* 受け取る画面 */
body.tg-recv{background:linear-gradient(165deg,var(--bg1),var(--bg2)) fixed;min-height:100vh;min-height:100svh;overflow-x:hidden}
body.tg-recv main{max-width:none;padding:0}
.tg-stage{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px 16px 40px;text-align:center;color:var(--ink);-webkit-tap-highlight-color:transparent;cursor:pointer;user-select:none}
.tg-dark .tg-stage,.tg-dark .tg-top{color:#fff}
.tg-top{font-size:14px;opacity:.85;letter-spacing:.06em}
.tg-top b{display:block;font:600 22px/1.4 "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;letter-spacing:.02em;margin-top:4px;opacity:1}
.tg-hint{font-size:15px;font-weight:700;padding:10px 22px;border-radius:999px;background:rgba(255,255,255,.75);color:#333;box-shadow:0 4px 14px rgba(0,0,0,.12);animation:tgPulse 1.8s ease-in-out infinite}
@keyframes tgPulse{50%{transform:scale(1.05)}}
.tg-lock{background:rgba(255,255,255,.85);color:#333;border-radius:18px;padding:12px 18px;font-size:14px;line-height:1.6;box-shadow:0 4px 14px rgba(0,0,0,.12);max-width:330px}
.tg-lock b{font-size:20px;display:block}
.tg-lock small{display:block;color:#666;font-size:12px;margin-top:4px}
.tg-read{position:fixed;inset:0;z-index:20;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:28px 14px 60px;opacity:0;pointer-events:none;transition:opacity .7s}
.tg-read.on{opacity:1;pointer-events:auto}
.tg-paper{position:relative;max-width:440px;margin:0 auto;background:var(--paper);color:var(--ink);border-radius:8px;padding:34px 24px 30px;box-shadow:0 20px 50px rgba(0,0,0,.25);transform:translateY(40px) scale(.94);transition:transform .9s cubic-bezier(.2,.8,.2,1);font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.tg-read.on .tg-paper{transform:none}
.tg-paper:before{content:"";position:absolute;inset:10px;border:1px solid var(--acc);opacity:.25;border-radius:4px;pointer-events:none}
.tg-paper h2{margin:0;text-align:center;color:var(--acc);font:italic 600 30px/1.2 Georgia,"Times New Roman",serif}
.tg-paper .jp{text-align:center;font-size:13px;color:var(--acc);opacity:.85;margin:4px 0 22px;letter-spacing:.12em}
.tg-paper .to{font-size:18px;margin:0 0 12px}
.tg-body{font-size:17px;line-height:2.15;background:repeating-linear-gradient(to bottom,transparent 0 calc(2.15em - 1px),rgba(0,0,0,.09) calc(2.15em - 1px) 2.15em);word-break:break-word;white-space:pre-wrap;min-height:4.3em}
.tg-body span{opacity:0;transition:opacity .9s}
.tg-body span.on{opacity:1}
.tg-paper .fr{text-align:right;font-size:17px;margin:18px 0 0}
.tg-paper .dt{text-align:right;font-size:12px;opacity:.6;margin:2px 0 0}
.tg-after{max-width:440px;margin:22px auto 0;text-align:center;opacity:0;transition:opacity .8s .2s}
.tg-after.on{opacity:1}
.tg-after .btn,.tg-after .btn.sub{display:block;width:100%;margin:10px 0;text-align:center;background:#2b2b2b;color:#fff;border:1px solid #2b2b2b;box-shadow:none;border-radius:999px;font-weight:600;letter-spacing:.04em;padding:12px 20px}
.tg-after .btn.sub{background:transparent;color:#2b2b2b;border-color:rgba(0,0,0,.35)}
.tg-dark .tg-after .btn{background:#fff;color:#1a1a1a;border-color:#fff}
.tg-dark .tg-after .btn.sub{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.tg-after .small{color:var(--ink);opacity:.75}
.tg-dark .tg-after .small{color:#fff}
.tg-mute{position:fixed;top:12px;right:12px;z-index:30;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.8);font-size:20px;box-shadow:0 2px 8px rgba(0,0,0,.15);display:none}
.tg-mute.show{display:block}
.tg-pv{position:fixed;left:0;right:0;top:0;z-index:40;background:#1e2a44;color:#fff;font-size:13px;text-align:center;padding:6px 10px;font-weight:700}
#tgFx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}
.tg-err{max-width:360px;margin:30vh auto 0;text-align:center;padding:0 16px}

/* 送る画面 */
.tg-hero{padding:18px 16px;text-align:center;overflow:hidden}
.tg-hero .tg-env{--w:min(62vw,250px);margin:6px auto 12px}
.tg-hero p{margin:6px 0 0}
.tg-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tg-mode button{border:2px solid var(--gline);background:rgba(255,255,255,.7);border-radius:16px;padding:10px 8px;font-size:15px;font-weight:800;color:#1e2a44;cursor:pointer;line-height:1.35}
.tg-mode button small{display:block;font-weight:500;font-size:12px;color:#5a6a8a}
.tg-mode button.on{border-color:var(--ac);background:#fff;box-shadow:0 4px 14px rgba(59,108,245,.18)}
.tg-kinds{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.tg-kinds button{border:1px solid var(--gline);background:rgba(255,255,255,.7);border-radius:14px;padding:8px 0;font-size:11.5px;white-space:nowrap;font-weight:700;cursor:pointer;color:#1e2a44}
.tg-kinds button{position:relative}
.tg-kinds button.rec{background:#fff;border:1px solid #f0b8c4}
.tg-kinds button em,.tg-th em.rec{position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-style:normal;font-size:9.5px;font-weight:800;background:#e0335a;color:#fff;border-radius:999px;padding:0 6px;line-height:15px;white-space:nowrap}
.tg-th em.rec{top:-7px;right:auto}
.tg-kinds button i{display:block;font-style:normal;font-size:22px}
.tg-kinds button.on{border:2px solid var(--ac);background:#fff}
.tg-field{display:block;margin:12px 0 4px;font-weight:700;font-size:14px}
.tg-in{width:100%;padding:12px;border:1px solid #d5dcea;border-radius:14px;font-size:16px;background:#fff;font-family:inherit}
textarea.tg-in{min-height:170px;line-height:1.8;resize:vertical}
.tg-count{text-align:right;font-size:12px;color:#5a6a8a}
.tg-count.over{color:#b91c1c;font-weight:700}
.tg-ex{display:flex;gap:6px;overflow-x:auto;padding:4px 0 6px;-webkit-overflow-scrolling:touch}
.tg-ex button{flex:0 0 auto;max-width:220px;border:1px dashed #b8c4dc;background:rgba(255,255,255,.8);border-radius:12px;padding:6px 10px;font-size:12px;text-align:left;cursor:pointer;color:#1e2a44;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tg-th{position:relative;border:2px solid transparent;background:rgba(255,255,255,.6);border-radius:14px;padding:8px 4px 6px;cursor:pointer;font-size:12px;font-weight:700;color:#1e2a44}
.tg-th.on{border-color:var(--ac);background:#fff}
.tg-th .mini{display:block;height:44px;margin:0 auto 4px;width:66px;border-radius:5px;background:var(--env);position:relative;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.tg-th .mini:before{content:"";position:absolute;left:0;right:0;top:0;height:62%;background:var(--flap);clip-path:polygon(0 0,100% 0,50% 100%)}
.tg-th em{position:absolute;top:4px;right:4px;font-style:normal;font-size:10px;background:#1e2a44;color:#fff;border-radius:999px;padding:0 6px;line-height:16px}
.tg-opts{margin-top:6px}
.tg-opts.off{opacity:.55}
.tg-row{display:flex;gap:8px;flex-wrap:wrap}
.tg-row button{border:1px solid #d5dcea;background:#fff;border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer;color:#1e2a44;display:inline-flex;align-items:center;gap:6px}
.tg-row button.on{border:2px solid var(--ac);font-weight:800}
.tg-row button i{width:16px;height:16px;border-radius:50%;display:inline-block}
.tg-bar{position:sticky;bottom:78px;z-index:5;padding:10px;display:grid;grid-template-columns:auto 1fr;gap:8px;margin:14px 0}
.tg-bar .btn{text-align:center;padding:12px 14px}
.tg-out textarea{width:100%;height:84px;font-size:12px;border:1px solid #d5dcea;border-radius:12px;padding:8px;font-family:ui-monospace,Menlo,monospace;word-break:break-all;background:#fff}
.tg-share{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.tg-share .btn{text-align:center;padding:11px 8px;font-size:15px}
.tg-share .line{background:#06c755;box-shadow:0 8px 20px rgba(6,199,85,.3);grid-column:1/-1}
.tg-modal{position:fixed;inset:0;z-index:100;background:rgba(10,14,30,.6);display:none;align-items:center;justify-content:center;padding:12px}
.tg-modal.on{display:flex}
.tg-modal iframe{width:min(420px,100%);height:min(780px,88vh);border:0;border-radius:20px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.tg-modal button{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:20px;cursor:pointer}
.tg-paid{background:var(--ok2,#ecfdf3);border:1px solid #9fd8b4;border-radius:14px;padding:10px 12px;font-size:14px;margin:10px 0}
@media (prefers-reduced-motion:reduce){.tg-env.idle,.tg-hint{animation:none}}
.tg-fab{position:fixed;left:50%;top:8px;transform:translate(-50%,-80px);width:calc(100% - 28px);max-width:452px;z-index:60;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:20px;background:rgba(255,255,255,.88);transition:transform .25s;pointer-events:none}
.tg-fab.show{transform:translate(-50%,0);pointer-events:auto}
.tg-fab-env{flex:0 0 auto;width:34px;height:24px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg-fab-t{flex:1;min-width:0;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-fab .btn{flex:0 0 auto;padding:9px 14px;font-size:14px;white-space:nowrap}
.tg-kinds,.tg-themes{padding-top:6px}
.tg-go{display:flex;flex-direction:column;align-items:center;gap:8px}
.tg-go .btn{width:100%;text-align:center}
.tg-pvbtn{border:1px solid #c9d1e3;background:#fff;color:#1e2a44;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:700;cursor:pointer}