/* shell/base.css */
@media (min-width:1000px) {
.mailbox { right:25px; top:calc(50% + 95px); transform:rotate(-3deg); }
}

/* retro.css */
.mailbox { width:clamp(170px,17.5vw,215px); }
.mailbox:hover .object-photo { transform:rotate(-3deg); }
.object-dialog[data-room="mailbox"] { width:min(500px,calc(100vw - 32px)); border:1px solid #d8d0bd; border-radius:3px; box-shadow:0 25px 80px #18292155; }
[data-room="mailbox"] .dialog-inner { padding:28px; }
[data-room="mailbox"] .dialog-head { align-items:center; margin-bottom:24px; }
[data-room="mailbox"] .dialog-head h2 { font-size:24px; }
.mail-links { display:grid; }
.mail-links a { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 2px; font-size:18px; text-decoration:none; border-bottom:1px solid #a4b8c866; transition:padding .2s,color .2s; }
.mail-links a:last-child { border-bottom:0; }
.mail-links a:hover { padding-left:8px; color:#ac4f36; }
.letter-form { margin-top:25px; padding-top:20px; border-top:1px solid #b8af9b; }
.letter-form h3 { margin:0 0 20px; font:700 24px/1.2 Georgia,serif; }
.letter-form label { display:block; margin:14px 0; font:13px/1.5 var(--ui); }
.letter-form label > span { color:#777366; }
.letter-form input,.letter-form textarea,.letter-form select { display:block; width:100%; margin-top:6px; padding:10px; border:1px solid #b8af9b; border-radius:2px; background:#fffef9; color:#262921; font:16px/1.5 var(--ui); }
.letter-form textarea { resize:vertical; min-height:145px; font:18px/1.55 Georgia,serif; }
.letter-delivery { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.letter-delivery label { flex:1; min-width:120px; margin:0; }
.letter-delivery button { flex:1; min-width:155px; min-height:46px; padding:10px 12px; border:1px solid #9f9888; border-radius:3px; background:#e9e2cf; color:#292d25; cursor:pointer; font-size:13px; }
.letter-help,.letter-status,#letter-destination { font:13px/1.5 var(--ui); }
.letter-help { margin:12px 0 0; color:#6f6b60; }
.letter-status:empty { display:none; }
#letter-destination { display:inline-block; margin:8px 0; text-underline-offset:3px; }
@media (max-width:999px) {
.mailbox { transform:rotate(-3deg); }
}

/* desk-v2.css */
.stage .mailbox { max-width:250px; transform:rotate(-3deg); }
@media(max-width:650px) {
.stage .mailbox { grid-column:3 / span 2; }
}
.object-dialog[data-room="mailbox"] { width:min(590px,calc(100vw - 24px)); background:#e9e4d8; }
[data-room="mailbox"] .dialog-inner { padding:22px; }
[data-room="mailbox"] .dialog-head { margin-bottom:8px; }
[data-room="mailbox"] .dialog-head h2 { font:18px Georgia,serif; }
.mail-links { display:flex; justify-content:center; gap:28px; padding:0 0 20px; }
.mail-links a { display:flex; align-items:center; gap:7px; padding:8px 0; font:13px var(--ui); border:0; }
.mail-links a:hover { padding-left:0; color:#506f81; }
.mail-links svg { width:20px; height:20px; fill:currentColor; }
.letter-form { margin:0; padding:0; border:0; }
.letter-paper { background:#fffdf5; padding:24px 30px 28px; box-shadow:0 2px 3px #30251020,0 6px 20px #3025100c; color:#3c403c; }
.letter-date { display:block; text-align:right; font:12px Georgia,serif; color:#8c8779; margin-bottom:30px; }
.letter-form h3 { font:italic 24px Georgia,serif; margin:0 0 22px; }
.letter-form textarea { min-height:224px; margin:0; padding:0; border:0; border-radius:0; background:repeating-linear-gradient(transparent 0 31px,#cbc6b64a 31px 32px); font:18px/32px Georgia,serif; color:#333c43; }
.letter-form textarea::placeholder,.letter-form input::placeholder { color:#a6a194; }
.letter-signoff { margin:25px 0 5px; font:italic 19px Georgia,serif; }
.letter-form input { width:65%; padding:5px 0; margin:0; border:0; border-bottom:1px solid #d7d0bf; background:transparent; font:italic 20px/1.5 Georgia,serif; }
#letter-send { display:block; margin:22px auto 0; padding:11px 28px; border:1px solid #969786; border-radius:2px; background:#f5f2e8; color:#3c4946; font:15px Georgia,serif; cursor:pointer; }
#letter-send:hover { background:#fffef7; }
.letter-help,.letter-status,#letter-destination { text-align:center; font:12px/1.5 var(--ui); }
#letter-destination { display:block; }
@media(max-width:450px) {
.mail-links { gap:19px; }
.letter-paper { padding:23px 21px; }
[data-room="mailbox"] .dialog-inner { padding:15px; }
}

/* interactions.css */
.object-dialog[data-room="mailbox"] { width:min(650px,calc(100vw - 24px)); background:transparent; border:0; box-shadow:none; border-radius:0; }
[data-room="mailbox"] .dialog-inner { padding:10px 16px 22px; }
[data-room="mailbox"] .dialog-head { position:absolute; top:75px; right:25px; z-index:4; }
[data-room="mailbox"] .dialog-head > div { display:none; }
[data-room="mailbox"] .dialog-close { width:30px; min-height:30px; height:30px; font-size:24px; background:transparent; border:0; box-shadow:none; }
.mail-links { padding-bottom:22px; }
.mail-links a { color:#fffcef; text-shadow:0 1px 3px #222; }
.letter-paper { position:relative; min-height:540px; padding:42px 44px 48px; background:#f7efdc url('../../assets/letter-paper.webp') center / 100% 100%; box-shadow:0 2px 3px #31251930,3px 16px 30px #191a2245; transform:rotate(-.6deg); }
.letter-paper::after { content:''; position:absolute; pointer-events:none; left:0; right:0; top:53%; height:2px; background:linear-gradient(#806c4520,#ffffff65); box-shadow:0 1px 5px #735c3210; }
.object-dialog .letter-paper h3 { color:#354353; font:italic 25px/1.4 Georgia,'Times New Roman',serif; margin:0 0 25px; }
.letter-date { font:14px/1.4 Georgia,serif; margin-bottom:40px; color:#7a7363; padding-right:12px; }
.object-dialog .letter-paper textarea { color:#36424c; background:transparent; font:21px/1.52 var(--hand); min-height:250px; resize:vertical; }
.object-dialog .letter-paper input { font:21px/1.5 var(--hand); color:#36424c; border:0; background:transparent; box-shadow:none; }
.letter-signoff { display:flex; align-items:baseline; gap:0; margin:24px 0 3px; color:#36424c; font:italic 20px/1.5 Georgia,serif; }
.object-dialog #letter-signoff { width:7ch; max-width:90%; min-width:0; margin:0; padding:0; }
.object-dialog #letter-name,.object-dialog #letter-email { margin:0; padding:0; width:100%; }
.letter-from { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.letter-trap { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
#letter-send { background:#f6efde; margin-top:20px; border:1px solid #a99b80; box-shadow:0 2px 4px #20150830; }
@media(max-width:650px) {
.letter-paper { padding:35px 27px; min-height:500px; }
.letter-date { font-size:12px; }
}
.letter-form textarea:focus-visible,.letter-form input:focus-visible { outline:none; box-shadow:0 1px 0 #6e71635c; caret-color:#34443e; }
.object-dialog .letter-paper h3 { font:20px/32px var(--ui); margin:0 0 24px; }
.letter-date { display:block; text-align:right; font:13px/24px var(--ui); margin:0 0 24px; }
.object-dialog .letter-paper textarea { font:21px/32px var(--hand); background:repeating-linear-gradient(to bottom,transparent 0 31px,#8297a24d 31px 32px); background-attachment:local; min-height:256px; padding:0; }
.letter-signoff { font:16px/32px var(--ui); }
.object-dialog #letter-signoff { font:16px/32px var(--ui); }
.letter-status { background:#f7efdc; color:#354353; padding:6px; }
.object-dialog #letter-signoff { width:6ch; }

/* Every part of the letter uses Bhaumik's handwriting, including feedback. */
#mailbox-room .letter-form,
#mailbox-room .letter-form * { font-family:var(--hand); font-style:normal; }
#mailbox-room .letter-date { font-size:18px; }
#mailbox-room .letter-paper h3 { font-size:25px; font-weight:400; }
#mailbox-room .letter-signoff,
#mailbox-room #letter-signoff { font-size:21px; }
#mailbox-room .letter-status,
#mailbox-room button { font-size:18px; }
@media(max-width:520px) { .letter-from { gap:13px; } }


/* The poem is already unfolded; the retired envelope is no longer rendered. */
.poem-letter { margin:20px 0 26px; }
.poem-paper { margin:0; padding:28px 27px 32px; background:#f7efdc url('../../assets/letter-paper.webp') center / 100% 100%; box-shadow:0 2px 3px #31251930,3px 16px 30px #191a2245; color:#36424c; }
.poem-lines { margin:0; font:23px/1.9 var(--hand); }
.poem-lines em { font-style:normal; font-size:1.12em; }
.poem-lines strong { font-weight:400; font-size:1.22em; }
.poem-cite { display:block; margin-top:18px; text-align:right; font:18px var(--hand); color:#7a7363; }
@media(max-width:600px) { .poem-lines { font-size:20px; } }

.mailbox-hardware { position:relative; width:112px; height:90px; margin:0 auto -12px; perspective:650px; pointer-events:none; }
.mailbox-hardware img { width:100%; height:100%; object-fit:contain; }
.mailbox-mouth,.mailbox-door { position:absolute; left:18%; top:30%; width:36%; height:48%; border-radius:48% 48% 4% 4%; }
.mailbox-mouth { background:linear-gradient(110deg,#121919,#364141); box-shadow:inset 3px 4px 6px #000; }
.mailbox-door { background:url('../../assets/icons/mailbox.svg') 25% 48% / 270% 210%; transform-origin:50% 100%; transition:transform 540ms cubic-bezier(.2,.7,.2,1); box-shadow:1px 3px 3px #0006; }
.mail-unfolded .mailbox-door { transform:rotateX(-102deg); }
#mailbox-room .letter-paper { transform-origin:50% 0; box-shadow:1px 2px 0 #cfc4ae,2px 12px 24px #1c160f38,inset 0 1px 0 #fff; }
@media(prefers-reduced-motion:reduce) { .mailbox-door { transition:none; } }