:root {
  --ink: #333a2c;
  --paper: #fff7e8;
  --gold: #ef9b72;
  --muted: #7e806c;
  --letter-font-scale: 1;
}

body {
  color: #313b2c;
  background: radial-gradient(circle at 11% 13%, #fff9df 0, transparent 28%), linear-gradient(165deg, #f9eacb, #f7d6ba 52%, #dfe5c3);
  font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
}
.stars, .aurora { display: none; }
.view { isolation: isolate; }
.eyebrow { color: #ad574d; letter-spacing: .22em; }
.primary { background: #a5384d; color: #fff7e9; border-radius: 100px; box-shadow: 0 9px 0 #76233c, 0 18px 28px #6b29383d; }
.primary:hover { background: #bd4660; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #d14b63; outline-offset: 3px; }

.mail-fall { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mail-fall i { position: absolute; top: -80px; width: 36px; height: 25px; border: 2px solid #a64a5a; border-radius: 3px; background: #fff7e7; opacity: .25; transform: translate3d(0,-80px,0) rotate(-14deg); animation: mail-drop 18s linear infinite; will-change: transform; box-shadow: 2px 3px 0 #e9b8a6; }
.mail-fall i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(32deg, transparent 48%, #a64a5a 50%, transparent 52%), linear-gradient(-32deg, transparent 48%, #a64a5a 50%, transparent 52%); }
.mail-fall i:nth-child(1) { left: 4%; animation-delay: -3s; animation-duration: 19s; }
.mail-fall i:nth-child(2) { left: 13%; animation-delay: -12s; animation-duration: 24s; transform: scale(.7); }
.mail-fall i:nth-child(3) { left: 23%; animation-delay: -8s; animation-duration: 17s; }
.mail-fall i:nth-child(4) { left: 32%; animation-delay: -17s; animation-duration: 22s; }
.mail-fall i:nth-child(5) { left: 41%; animation-delay: -5s; animation-duration: 26s; }
.mail-fall i:nth-child(6) { left: 52%; animation-delay: -21s; animation-duration: 20s; }
.mail-fall i:nth-child(7) { left: 61%; animation-delay: -10s; animation-duration: 23s; }
.mail-fall i:nth-child(8) { left: 70%; animation-delay: -2s; animation-duration: 18s; }
.mail-fall i:nth-child(9) { left: 78%; animation-delay: -15s; animation-duration: 26s; }
.mail-fall i:nth-child(10) { left: 86%; animation-delay: -6s; animation-duration: 21s; }
.mail-fall i:nth-child(11) { left: 94%; animation-delay: -19s; animation-duration: 24s; }
.mail-fall i:nth-child(12) { left: 56%; animation-delay: -26s; animation-duration: 29s; }
@keyframes mail-drop { from { transform: translate3d(-30px,-80px,0) rotate(-18deg); } to { transform: translate3d(56px,calc(100vh + 120px),0) rotate(24deg); } }

#envelope-view { min-height: 100svh; padding: 48px 24px; }
.envelope-scene { position: relative; width: min(1040px, 100%); display: grid; grid-template-columns: minmax(250px, .9fr) minmax(320px, 1.1fr); align-items: center; column-gap: 36px; text-align: left; }
.envelope-scene::before { width: min(640px,80vw); height: min(640px,80vw); top: 50%; left: 21%; background: radial-gradient(circle, #fae7ab 0, #eac69480 48%, transparent 72%); filter: none; z-index: -1; }
.mascot-wrap { grid-column: 1; grid-row: 1 / span 5; display: grid; place-items: center; align-self: stretch; }
.mascot { display: block; width: min(100%, 460px); height: auto; object-fit: contain; filter: drop-shadow(0 24px 20px #55452c36); animation: mascot-bob 4s ease-in-out infinite; }
@keyframes mascot-bob { 50% { transform: translateY(-10px) rotate(-2deg); } }
.envelope-scene .envelope, .envelope-scene .eyebrow, .envelope-scene h1, .envelope-scene .envelope-hint, .envelope-scene .primary { grid-column: 2; }
.envelope-scene .eyebrow { margin: 26px 0 8px; }
.envelope-scene h1 { font-size: clamp(32px, 4vw, 55px); line-height: 1.25; margin-bottom: 13px; color: #3b4334; font-weight: 700; letter-spacing: .015em; }
.envelope-hint { color: #666e59; font-size: 17px; margin-bottom: 0; }
.envelope-scene .primary { justify-self: start; margin-top: 28px; padding: 15px 34px; font-size: 16px; }
.envelope { width: min(100%, 470px); height: 282px; margin: 0; border-radius: 8px; background: repeating-linear-gradient(115deg, #273554 0 20px, #fff7ec 20px 35px, #c94862 35px 55px, #fff7ec 55px 70px); transform: rotate(-3deg); box-shadow: 0 26px 45px #643f2e40; filter: none; }
.envelope-back { inset: 11px; background: #fffaf0; z-index: 1; border-radius: 2px; clip-path: none; }
.envelope-letter { left: 28px; right: 28px; bottom: 10px; background: #fff7e8; z-index: 2; }
.envelope-letter::after { content: "♡"; color: #b24b62; }
.envelope-flap { inset: 11px; height: 132px; background: #efdfca; z-index: 3; clip-path: polygon(0 0,50% 95%,100% 0); }
.envelope-face { position: absolute; z-index: 4; inset: 11px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 22px 26px; border-radius: 2px; color: #3c5046; background: #fff9ed; transition: opacity .25s; }
.postmark { position: absolute; right: 24px; top: 18px; width: 77px; height: 77px; border: 2px dashed #49665e; border-radius: 50%; display: grid; place-items: center; font: 33px system-ui, sans-serif; transform: rotate(15deg); color: #49665e; }
.postmark small { position: absolute; bottom: 13px; font: 700 8px system-ui,sans-serif; letter-spacing: .07em; }
.address-lines { width: 70%; margin-top: 34px; }
.address-lines span { display: block; font: 700 16px/1.5 system-ui, sans-serif; letter-spacing: .08em; }
.address-lines b { font-family: "Noto Serif SC",serif; }
.address-lines i { display: block; border-bottom: 2px dotted #8caa9c; margin-top: 14px; width: 100%; }
.envelope-number { position: absolute; right: 26px; bottom: 18px; font: 700 12px system-ui,sans-serif; letter-spacing: .16em; color: #a94259; }
.envelope-seal { z-index: 5; width: 36px; height: 36px; left: 50%; top: 130px; background: #a84459; color: #fff9e8; }
.envelope.opening .envelope-face { opacity: 0; transition-delay: .35s; }
.envelope.opening .envelope-flap { transform: rotateX(180deg); }

.glass { background: #fff9ebed; border: 1px solid #d9beaa; color: #343e30; box-shadow: 0 22px 60px #5945362e; backdrop-filter: none; }
.questionnaire-card h1 { color: #354534; }
.questionnaire-card p, .fine-print { color: #68705e; }
.question-block { border-top-color: #d8c7ae; }
.choice { color: #314233; border-color: #c9bca9; }
input, textarea { color: #2f4135; background: #fffdf8; border-color: #b8b8a2; }

.letter-stage { background: linear-gradient(#f9ead0,#e9dec9 75%,#c9c7a3); padding-bottom: 280px; }
.reader-toolbar { top: 16px; min-width: 0; justify-content: center; border-radius: 14px; padding: 9px 14px; color: #fff6e9; background: #3b4c40f2; border-color: #758875; font-size: 13px; box-shadow: 0 8px 22px #1d2d2852; }
.font-control { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff6e9; font: 12px system-ui,sans-serif; white-space: nowrap; }
.font-control select { width: auto; border-radius: 8px; border: 1px solid #a4b7a2; background: #f8f4e9; color: #283b32; padding: 5px 8px; font: 13px system-ui,sans-serif; }
.letter-paper { background: repeating-linear-gradient(0deg, #aa9a7c18 0 1px, transparent 1px 34px), #fff9e8; border-color: #d3bea0; box-shadow: 0 35px 90px #3b352d55; }
.paper-grain { opacity: .08; }
.letter-meta { color: #a44058; }
.letter-meta b { color: #344b3b; }
.letter-section h2 { font-size: calc(25px * var(--letter-font-scale)); color: #3d533d; }
.letter-section p { font-size: calc(clamp(17px, 2.5vw, 20px) * var(--letter-font-scale)); line-height: 1.95; }
.signature, .finish-panel p, .interaction p { font-size: calc(17px * var(--letter-font-scale)); }
.finish-panel h2 { color: #3e523e; }
.letter-choice { grid-template-columns: 1fr; }
.burn-button { width: min(100%, 280px); background: #a83f55; box-shadow: 0 10px 0 #6f2b40, 0 18px 30px #823b4740; font-weight: 700; }
.fire-pot { z-index: 6; }
.letter-paper.burning { animation: letter2-fall 3.5s cubic-bezier(.3,.4,.58,.99) forwards; transform-origin: center bottom; pointer-events: none; }
.letter-paper.burning::after { animation-duration: 3.5s; }
@keyframes letter2-fall { 0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } 42% { transform: translateY(15vh) rotate(4deg) scale(.78); opacity: 1; } 75% { transform: translateY(56vh) rotate(-11deg) scale(.43); opacity: .9; } 100% { transform: translateY(105vh) rotate(18deg) scale(.1); opacity: 0; } }
.final-card { text-align: center; background: #fff9eb; }
.final-card h1 { color: #3e523b; font-size: clamp(30px,4vw,46px); }
.final-card p { color: #566451; font-size: 18px; line-height: 1.8; }
.final-card .primary { margin-top: 20px; }
.ashes { background: radial-gradient(circle at 50% 110%, #e48d5b55, transparent 43%); }

@media (max-width: 760px) {
  #envelope-view { padding: 30px 18px 70px; }
  .envelope-scene { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .mascot-wrap { width: 100%; height: 260px; }
  .mascot { width: min(260px,72vw); }
  .envelope { width: min(430px, 100%); height: 244px; margin: 0 auto; }
  .envelope-scene .eyebrow { margin-top: 28px; }
  .envelope-scene .primary { align-self: center; }
  .envelope-scene::before { top: 26%; left: 50%; }
  .postmark { transform: scale(.8) rotate(15deg); transform-origin: top right; }
  .address-lines { width: 78%; }
  .mail-fall i:nth-child(n+7) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mail-fall i, .mascot { animation: none !important; }
}
.admin-body { background: #121018; color: #eee8ef; font-family: system-ui,sans-serif; }
/* The envelope is the one hero object; the charm hangs from its upper corner. */
.envelope-scene { display: flex; flex-direction: column; align-items: center; width: min(960px,100%); text-align: center; }
.envelope-scene::before { left: 50%; top: 30%; width: min(780px,100vw); height: min(620px,85vw); }
.letter-object { position: relative; width: min(620px,calc(100vw - 110px)); margin: 30px auto 26px; perspective: 1200px; }
.letter-object::after { content: ""; position: absolute; z-index: -1; inset: auto 5% -36px; height: 45px; border-radius: 50%; background: #674b3b47; filter: blur(22px); }
.envelope-scene .envelope { position: relative; width: 100%; height: clamp(230px,39vw,365px); margin: 0; transform-style: preserve-3d; transform: rotateX(var(--env-x, 0deg)) rotateY(var(--env-y, 0deg)) rotateZ(-3deg); transition: transform .14s ease-out; box-shadow: 4px 8px 0 #b7a18b, 8px 13px 0 #8c7568, 18px 30px 43px #59432d5e; }
.envelope-scene .envelope::before { content: ""; position: absolute; inset: 3px; z-index: 0; border-radius: 6px; background: #e6d6bd; transform: translateZ(-16px); box-shadow: 0 0 0 3px #bca38c; }
.envelope-back { transform: translateZ(2px); }
.envelope-face { transform: translateZ(9px); background: linear-gradient(144deg,#fffdf5,#f7ecdc 65%,#e5d1b7); box-shadow: inset 0 1px 2px #ffffff, inset -8px -8px 18px #a4896d26; }
.envelope-flap { transform: translateZ(7px); }
.envelope-seal { transform: translateX(-50%) translateZ(14px); }
.address-lines { margin-top: 26px; text-align: left; }
.envelope-number { font-size: 13px; }
.charm-pivot { position: absolute; z-index: 8; top: -7%; right: -17%; width: clamp(125px,23vw,225px); height: auto; transform-origin: 28% 14%; transform: rotate(var(--charm-angle, 0deg)); animation: charm-idle 3.4s ease-in-out infinite; pointer-events: none; filter: drop-shadow(10px 14px 8px #3d3f2e57); }
.charm-pivot::before { content: ""; position: absolute; top: 12%; left: 5%; width: 20%; height: 15%; border: 5px solid #87908c; border-radius: 50%; box-shadow: inset 1px 1px 2px #fff; }
.charm-pivot img { display: block; width: 100%; height: auto; }
.charm-pivot.active { animation: none; }
@keyframes charm-idle { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(8deg); } }
.envelope-scene .eyebrow { margin: 12px 0 10px; }
.envelope-scene h1 { font-size: clamp(30px,4.3vw,52px); }
.envelope-scene .primary { align-self: center; justify-self: center; }
@media (max-width: 760px) {
  .letter-object { width: min(450px,calc(100vw - 70px)); margin-top: 70px; }
  .envelope-scene .envelope { height: clamp(210px,58vw,280px); }
  .charm-pivot { right: -18%; width: clamp(105px,29vw,155px); }
  .envelope-scene .eyebrow { margin-top: 20px; }
  .address-lines { margin-top: 32px; width: 78%; }
}
@media (prefers-reduced-motion: reduce) { .charm-pivot { animation: none; } }


@media (max-width: 760px) { .charm-pivot { right: -11%; width: clamp(100px,27vw,145px); } }


/* Falling figures use the first generated monster asset. */
.mail-fall i { width: 52px; height: 52px; border: 0; border-radius: 0; background: url('/assets/letter-monster.webp') center / contain no-repeat; box-shadow: none; opacity: .32; }
.mail-fall i::before { display: none; }
.mail-fall i:nth-child(3n) { width: 38px; height: 38px; opacity: .24; }
.mail-fall i:nth-child(4n) { width: 66px; height: 66px; opacity: .18; }


/* Decorative layers stay behind controls. The falling figures appear only on the home view. */
.ashes { pointer-events: none; }
body:not([data-view="envelope"]) .mail-fall { display: none; }
.mail-fall i { animation-name: figure-fall; animation-timing-function: ease-in-out; }
.mail-fall i:nth-child(even) { animation-name: figure-fall-alt; }
.mail-fall i:nth-child(1) { animation-duration: 8.4s; }
.mail-fall i:nth-child(2) { animation-duration: 11.3s; }
.mail-fall i:nth-child(3) { animation-duration: 7.6s; }
.mail-fall i:nth-child(4) { animation-duration: 10.1s; }
.mail-fall i:nth-child(5) { animation-duration: 12.8s; }
.mail-fall i:nth-child(6) { animation-duration: 8.9s; }
.mail-fall i:nth-child(7) { animation-duration: 9.7s; }
.mail-fall i:nth-child(8) { animation-duration: 7.9s; }
.mail-fall i:nth-child(9) { animation-duration: 11.8s; }
.mail-fall i:nth-child(10) { animation-duration: 8.1s; }
.mail-fall i:nth-child(11) { animation-duration: 12.1s; }
.mail-fall i:nth-child(12) { animation-duration: 9.2s; }
@keyframes figure-fall {
  0% { transform: translate3d(-20px,-90px,0) rotate(-14deg); }
  17% { transform: translate3d(15px,12vh,0) rotate(11deg); }
  34% { transform: translate3d(-12px,32vh,0) rotate(-9deg); }
  51% { transform: translate3d(24px,42vh,0) rotate(13deg); }
  69% { transform: translate3d(-19px,56vh,0) rotate(-15deg); }
  84% { transform: translate3d(16px,84vh,0) rotate(7deg); }
  100% { transform: translate3d(-8px,calc(100vh + 90px),0) rotate(-12deg); }
}
@keyframes figure-fall-alt {
  0% { transform: translate3d(20px,-90px,0) rotate(12deg); }
  19% { transform: translate3d(-17px,14vh,0) rotate(-11deg); }
  36% { transform: translate3d(12px,29vh,0) rotate(10deg); }
  54% { transform: translate3d(-25px,46vh,0) rotate(-13deg); }
  68% { transform: translate3d(18px,55vh,0) rotate(16deg); }
  83% { transform: translate3d(-15px,81vh,0) rotate(-8deg); }
  100% { transform: translate3d(8px,calc(100vh + 90px),0) rotate(13deg); }
}


.envelope-seal { padding: 0; border: 0; cursor: pointer; transform: translateX(-50%) translateZ(14px); }
.envelope-seal:hover, .envelope-seal:focus-visible { transform: translateX(-50%) translateZ(14px) scale(1.12); }
.charm-pivot, .charm-pivot.active { animation: charm-free-float 4.8s ease-in-out infinite; }
@keyframes charm-free-float {
  0%,100% { transform: translate3d(-5px,1px,0) rotate(calc(-8deg + var(--charm-angle, 0deg))); }
  32% { transform: translate3d(7px,-13px,0) rotate(calc(10deg + var(--charm-angle, 0deg))); }
  67% { transform: translate3d(-9px,4px,0) rotate(calc(-5deg + var(--charm-angle, 0deg))); }
}
@media (prefers-reduced-motion: reduce) { .charm-pivot, .charm-pivot.active { animation: none; } }


/* Reveal the actual flap before the sheet rises. */
.envelope.opening .envelope-face { opacity: 0; transition: opacity .12s ease-out; pointer-events: none; }
.envelope.opening .envelope-back { background: #bea184; }
.envelope.opening .envelope-flap { z-index: 4; background: #e7cfb0; transform: rotateX(-165deg); box-shadow: 0 -6px 15px #5b483034; }
.envelope-letter { background: repeating-linear-gradient(0deg, transparent 0 25px, #ae9e8150 25px 26px), #fff8e8; border: 1px solid #d3bfa2; }

/* Touch gives the charm momentum while the free float continues between gestures. */
.charm-pivot, .charm-pivot.active { animation-duration: 3.2s; }
@keyframes charm-free-float {
  0%,100% { transform: translate3d(-9px,3px,0) rotate(calc(-15deg + var(--charm-angle, 0deg))); }
  24% { transform: translate3d(13px,-19px,0) rotate(calc(18deg + var(--charm-angle, 0deg))); }
  56% { transform: translate3d(-14px,8px,0) rotate(calc(-17deg + var(--charm-angle, 0deg))); }
  78% { transform: translate3d(10px,-9px,0) rotate(calc(11deg + var(--charm-angle, 0deg))); }
}
@media (prefers-reduced-motion: reduce) { .charm-pivot, .charm-pivot.active { animation: none; } }
.envelope-back { z-index: 0; transform: translateZ(-10px); }
.envelope.opening .envelope-back { background: #e8d4bb; }
.envelope-face { clip-path: inset(0 0 0 0); transition: clip-path .38s ease; }
.envelope.opening .envelope-face { opacity: 1; z-index: 3; clip-path: inset(55% 0 0 0); transition: clip-path .38s ease; }
.envelope.opening .envelope-face > * { opacity: 0; }


.postmark svg { width: 44px; height: 44px; fill: #49665e; transform: rotate(18deg); }
.envelope.opening .envelope-letter {
  z-index: 5;
  height: clamp(230px, 33vw, 300px);
  opacity: 1;
  animation: paper-big-unfold 2.4s cubic-bezier(.26,.72,.25,1) .05s both;
  box-shadow: 0 15px 28px #594b3b66, inset 0 0 28px #dac8af80;
}
.envelope.opening .envelope-letter::after { content: "✦"; color: #a64860; font-size: 33px; opacity: .7; }
@keyframes paper-big-unfold {
  0% { transform: translateY(-12px) rotateX(78deg) scale(.6,.35); opacity: .2; }
  23% { transform: translateY(-85px) rotateX(54deg) scale(.75,.62); opacity: 1; }
  51% { transform: translateY(-150px) rotateX(22deg) scale(1,1); opacity: 1; }
  77% { transform: translateY(-190px) rotateX(-16deg) scale(1.14,1.14); opacity: 1; }
  100% { transform: translateY(-108px) rotateX(0deg) scale(1,1); opacity: 1; }
}

/* The extracted sheet carries the same opening words as the reader. */
.envelope-letter::after, .envelope.opening .envelope-letter::after { content: none; }
.paper-preview { position: absolute; inset: 18px 22px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; color: #4f473d; text-align: left; opacity: 0; }
.paper-preview span { font-size: 12px; color: #9b5160; margin-bottom: 13px; }
.paper-preview strong { font-size: clamp(20px, 2.6vw, 29px); font-weight: 600; margin-bottom: 12px; }
.paper-preview p { margin: 0; font-size: clamp(12px, 1.7vw, 15px); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.envelope.opening .paper-preview { animation: paper-preview-appear .65s ease .75s both; }
@keyframes paper-preview-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) { .paper-preview { inset: 15px 18px; } .paper-preview p { -webkit-line-clamp: 3; } }

/* Match the opened sheet to the envelope's original clean lettering. */
.paper-preview, .letter-paper { font-family: system-ui, 'Microsoft YaHei', sans-serif; }

/* Keep the sender name clear of the lower airmail border on phones. */
@media (max-width: 760px) {
  .envelope-number { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: 10px 10px 0 0; z-index: 5; font-size: clamp(18px, 5vw, 21px); line-height: 1.2; letter-spacing: .04em; text-shadow: 0 1px 0 #fff9ed; }
}

/* The first generated toy replaces the wax seal on the opened sheet. */
.wax-seal { top: 16px; right: 18px; width: 76px; height: 76px; border-radius: 0; background: transparent; box-shadow: none; transform: rotate(8deg); pointer-events: none; }
.wax-seal img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(3px 6px 4px #45382455); }
@media (max-width: 700px) { .wax-seal { top: 12px; right: 12px; width: 62px; height: 62px; transform: rotate(8deg); } }