/* The last invitation is one short, centered note after the three table beats. */
#invitation-dialog.letter-dialog{position:fixed;inset:0;margin:auto;width:min(1040px,calc(100vw - 48px));height:min(920px,calc(100dvh - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:0;overflow:hidden;background:#fcf2df;border:1px solid #aa8969;border-radius:2px;box-shadow:0 22px 100px #28181180,5px 5px 0 #aa896933;text-align:center}
#invitation-dialog::backdrop{background:#281b15b8;backdrop-filter:blur(5px)}
#invitation-dialog:before{width:100px;height:17px;left:calc(50% - 50px);z-index:1}
#invitation-dialog[open]{animation:letter-unfold .32s ease-out both}
#invitation-screen{height:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bea78e transparent;padding:52px clamp(24px,6vw,88px) 36px;outline:none}
.letter-content{width:100%;flex-shrink:0;margin:auto 0}
#invitation-dialog .dialog-close{position:absolute;z-index:2;top:10px;right:12px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #cbb194;border-radius:50%;background:#fcf2dff5;color:#806354;font-size:26px;line-height:1}
#invitation-dialog .dialog-close:hover{background:#efe0c8}
.letter-dialog .chapter-label{font-size:10px;letter-spacing:2px;color:#92725b}
.letter-dialog h2{max-width:19ch;font:normal clamp(32px,3.5vw,50px)/1.4 var(--serif);margin:24px auto;color:#74566c;text-wrap:balance}
.letter-dialog .letter-copy{max-width:36ch;margin:auto;font:22px/1.75 var(--serif);color:#705b4f}.letter-dialog .letter-copy p{margin:0}
.letter-details{margin:18px auto 0;max-width:40ch;color:#92725b;font-size:12px}.letter-details summary{cursor:pointer;min-height:36px;padding:6px;list-style-position:inside}.letter-details p{margin:0 0 8px;line-height:1.8}
.letter-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:440px;margin:24px auto 0}.letter-actions .primary-button,.letter-actions .secondary-button{font-size:14px;min-height:52px;margin:0}.letter-actions .text-button{font-size:12px;min-height:44px;margin:0}
@keyframes letter-unfold{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:650px){#invitation-dialog.letter-dialog{width:calc(100vw - 20px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}#invitation-screen{padding:56px 24px 24px}.letter-dialog .chapter-label{font-size:9px;letter-spacing:1.3px}.letter-dialog h2{font-size:34px;margin:20px auto}.letter-dialog .letter-copy{font-size:19px;line-height:1.75}.letter-details{margin-top:14px;font-size:11px}.letter-actions{margin-top:18px}.letter-actions .primary-button,.letter-actions .secondary-button{font-size:13px;min-height:48px}}
@media(max-width:650px) and (max-height:650px){#invitation-screen{padding:46px 20px 20px}.letter-dialog h2{font-size:28px;margin:14px auto}.letter-dialog .letter-copy{font-size:17px;line-height:1.65}.letter-actions{gap:6px;margin-top:12px}.letter-actions .primary-button,.letter-actions .secondary-button{min-height:44px;font-size:12px}.letter-actions .text-button{min-height:36px}.letter-details{margin-top:8px}}
@media(max-height:550px) and (min-aspect-ratio:1/1){#invitation-dialog.letter-dialog{width:min(1040px,calc(100vw - 24px));height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}#invitation-screen{padding:40px 40px 24px}.letter-dialog h2{font-size:32px;margin:12px auto}.letter-dialog .letter-copy{font-size:18px}.letter-actions{margin-top:16px}}
@media(min-width:651px) and (max-height:700px){#invitation-screen{padding:40px 40px 20px}.letter-dialog h2{font-size:32px;line-height:1.2;margin:12px auto}.letter-dialog .letter-copy{font-size:18px;line-height:1.6}.letter-details{margin-top:8px}.letter-actions{gap:6px;margin-top:12px}.letter-actions .primary-button,.letter-actions .secondary-button{min-height:44px;font-size:13px}.letter-actions .text-button{min-height:36px}}

/* The sealed envelope lives only in a modal after the third cup settles. */
.envelope-dialog{position:fixed;inset:0;margin:auto;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;background:transparent;color:#fae5c0;overflow:hidden;box-shadow:none}
.envelope-dialog::backdrop{background:#281b15c9;backdrop-filter:blur(3px)}
.envelope-dialog[open]{animation:envelope-arrive .35s ease-out both}
.envelope-dialog .dialog-close{z-index:10;top:max(16px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:44px;height:44px;background:transparent;color:#ead1ae;font-size:28px}
.envelope-stage{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px 32px;text-align:center;gap:20px}
.envelope-eyebrow{margin:0;color:#d3ad7e;font:10px/1.6 var(--body);letter-spacing:2px}
#envelope-title{max-width:30ch;margin:0 0 6px;font:normal clamp(23px,2.4vw,32px)/1.6 var(--serif);color:#fae5c0;text-wrap:balance}
.envelope-open{display:block;width:min(480px,calc(100vw - 56px),calc((100dvh - 270px)*1.5));min-width:200px;padding:0;border:0;background:none;box-shadow:none;color:inherit;cursor:pointer;perspective:1200px;-webkit-tap-highlight-color:transparent}
.envelope-open:disabled{opacity:1;cursor:default}
.envelope-open:focus-visible{outline:0}.envelope-open:focus-visible .envelope-prompt{text-decoration:underline;text-underline-offset:5px}
.envelope-visual{position:relative;display:block;width:100%;aspect-ratio:8/5;filter:drop-shadow(0 12px 18px #1c100c66);isolation:isolate;perspective:1200px}
.envelope-back,.envelope-front,.envelope-flap,.envelope-paper,.envelope-seal{position:absolute;display:block}
.envelope-back{inset:0;background:#b88d61;border:3px solid #a67950;border-radius:2px;z-index:0;box-shadow:3px 3px 0 #6a432c}
.envelope-paper{inset:7% 7% 5%;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#fff1d4;border:2px solid #dbbd8d;color:#8a6656;transition:transform .58s cubic-bezier(.22,.7,.25,1) .35s}
.envelope-paper span:first-child{font:20px/1.4 var(--serif);letter-spacing:4px}.envelope-paper span:nth-child(2){font:italic 14px/1.6 var(--serif)}.envelope-paper span:last-child{font:27px/1 var(--serif);color:#a87383}
.envelope-front{inset:0;z-index:2;background:linear-gradient(32deg,#dcb781 0%,#eed0a0 49.5%,#d6ae78 50%,#efd1a2 50.5%,#e7c28e 100%);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);border:3px solid #bb8e5f;border-top:0}
.envelope-flap{inset:0 0 36%;z-index:3;transform-origin:center top;backface-visibility:visible;background:linear-gradient(#f6dfb6,#e3bd87);clip-path:polygon(0 0,100% 0,100% 8%,54% 96%,50% 100%,46% 96%,0 8%);transition:transform .48s ease-in-out}
.envelope-seal{z-index:4;top:46%;left:calc(50% - 24px);width:48px;height:48px;display:grid;place-items:center;background:#a2737e;border:3px solid #875d67;border-radius:50%;box-shadow:2px 3px 0 #875d6740;color:#fce6cb;font:27px/1 var(--serif);transition:opacity .18s,transform .18s}
.envelope-prompt{display:block;margin-top:26px;color:#e8c79a;font:12px/2 var(--body);letter-spacing:.4px;transition:opacity .2s}
.envelope-dialog.is-opening .envelope-flap{transform:rotateX(180deg);z-index:0}
.envelope-dialog.is-opening .envelope-seal{opacity:0;transform:scale(.7)}
.envelope-dialog.is-opening .envelope-paper{transform:translateY(-68%)}
.envelope-eyebrow,#envelope-title{transition:opacity .2s,transform .2s}
.envelope-dialog.is-opening .envelope-eyebrow,.envelope-dialog.is-opening #envelope-title{opacity:0;transform:translateY(-8px)}
.envelope-dialog.is-opening .envelope-prompt{opacity:0}
@keyframes envelope-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.envelope-stage{padding:64px 24px 28px;gap:18px}.envelope-eyebrow{font-size:9px;letter-spacing:1.5px}#envelope-title{font-size:23px;line-height:1.6}.envelope-prompt{font-size:11px;margin-top:24px}.envelope-seal{top:45%;width:40px;height:40px;left:calc(50% - 20px);font-size:23px}.envelope-paper{gap:5px}.envelope-paper span:first-child{font-size:17px}.envelope-paper span:nth-child(2){font-size:12px}}
@media(max-height:550px) and (min-aspect-ratio:1/1){.envelope-stage{padding:24px 64px;gap:8px}.envelope-eyebrow{font-size:8px}#envelope-title{font-size:21px;max-width:40ch;margin:0}.envelope-open{width:min(300px,calc((100dvh - 155px)*1.5));min-width:180px}.envelope-prompt{font-size:10px;line-height:1.6;margin-top:14px}.envelope-seal{width:36px;height:36px;left:calc(50% - 18px);font-size:21px}.envelope-paper{gap:3px}.envelope-paper span:first-child{font-size:16px}.envelope-paper span:nth-child(2){font-size:11px}.envelope-paper span:last-child{font-size:20px}}