/* A letter: one portrait canvas fills the screen, words sit on the lower half, buttons hug the bottom. On desktop it becomes a phone-wide card. */
:root{
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,system-ui,sans-serif;
  --ink:#fff; --soft:rgba(255,255,255,.62); --line:rgba(255,255,255,.18);
  --accent:#ffb9cf;
}
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0a0710;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;overflow:hidden}

.letter{position:relative;width:100%;max-width:520px;height:100vh;height:100dvh;margin:0 auto;overflow:hidden;
  box-shadow:0 0 80px rgba(0,0,0,.6)}
canvas#stage{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;touch-action:none;cursor:grab}

/* 压在画面上的字：上面一行小字，下面标题/正文/落款 */
.overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;
  padding:max(5vh,28px) 7% calc(max(9vh,60px) + env(safe-area-inset-bottom)) 7%;text-align:center}
.kicker{font-family:var(--serif);font-size:.92rem;letter-spacing:.28em;color:var(--soft);text-transform:uppercase;min-height:1.5em}
.words{display:flex;flex-direction:column;gap:.45em;align-items:center;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.words h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,6.5vw,2.2rem);line-height:1.2;margin:0;letter-spacing:.01em}
.words p{margin:0;font-family:var(--serif);font-size:clamp(1rem,3.9vw,1.15rem);color:rgba(255,255,255,.9);max-width:30em;white-space:pre-line}
.words #sign{align-self:flex-end;color:var(--soft);font-size:.95rem;margin-top:.4em}
.words #extra{font-family:var(--serif);color:rgba(255,255,255,.82);font-size:.98rem;line-height:1.7;white-space:pre-line}
.words #extra b{color:var(--accent);font-weight:700;font-size:1.2em;font-variant-numeric:tabular-nums}
.words #extra.big{font-size:1.05rem}
.words .names{display:flex;flex-wrap:wrap;justify-content:center;gap:.3em .8em;max-width:24em}
.words .names span{opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}
.words .names span.on{opacity:1;transform:none}

/* 每一幕的字渐显 */
.words>*{opacity:0;transform:translateY(8px);transition:opacity .9s ease,transform .9s ease}
.words>*.show{opacity:1;transform:none}

/* 点一下的提示 */
.hint{position:absolute;left:0;right:0;top:58%;text-align:center;pointer-events:none;color:var(--soft);font-size:.9rem;
  letter-spacing:.1em;opacity:0;transition:opacity .5s}
.hint.show{opacity:1;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* 贴底一排按钮 */
.bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:8px;
  padding:10px 10px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
button{font:inherit;cursor:pointer;border:none;border-radius:999px;padding:9px 15px;font-size:.86rem;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid var(--line);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);transition:background .15s;min-height:38px;white-space:nowrap}
button:hover{background:rgba(255,255,255,.2)}
button:active{transform:translateY(1px)}
button.primary{background:var(--accent);color:#1a0a12;border-color:transparent;font-weight:700}

/* 定制表单：从底下滑上来 */
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:86%;overflow:auto;background:rgba(14,10,20,.96);
  border-radius:18px 18px 0 0;padding:16px 18px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);transform:translateY(100%);transition:transform .28s ease;z-index:3}
.sheet.open{transform:none}
.sheet[hidden]{display:none}
.sheet h2{font-size:1.05rem;margin:0 0 4px;font-family:var(--serif)}
.sheet .lede{color:var(--soft);font-size:.84rem;margin:0 0 12px;line-height:1.5}
.sheet .head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sheet #close{padding:4px 10px;min-height:0;font-size:1.1rem;line-height:1}
.field{display:block;margin-bottom:11px}
.field span{display:block;font-size:.8rem;color:var(--soft);margin-bottom:4px}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:16px;padding:9px 11px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.07);color:#fff;resize:none}
.field textarea.oneline{height:2.6em;overflow:hidden;white-space:nowrap;line-height:1.3}
.field select option{color:#000}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.sheet .actions{display:flex;gap:8px;margin-top:6px}
.sheet .actions button{flex:1}
.sheet .tip{color:var(--soft);font-size:.78rem;margin:10px 0 0;line-height:1.5}

@media (min-width:600px){
  .letter{height:min(100vh,960px);margin-top:calc((100vh - min(100vh,960px))/2);border-radius:22px}
}