/* Offline return: a kraft envelope that opens to a postcard. Cream paper, ink outlines, terracotta actions. */
.modal{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(43,38,48,.38),rgba(26,24,40,.74));display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.mail{position:relative;width:min(780px,100%);display:grid;place-items:center;padding:20px 0 90px}
.envelope,.postcard{grid-area:1/1}

/* ---- envelope ---- */
.envelope{position:relative;width:min(560px,100%);aspect-ratio:14/9;perspective:1000px;cursor:pointer;transition:transform .7s .55s,opacity .5s .75s;-webkit-tap-highlight-color:transparent}
.envelope:focus-visible{outline:3px solid var(--sky);outline-offset:8px;border-radius:14px}
.mail[data-state="open"] .envelope{transform:translateY(110px) scale(.88);opacity:0;pointer-events:none;cursor:default}
.env-body{position:absolute;inset:0;background-color:#E4C897;background-image:var(--grain),linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%,rgba(120,80,40,.12));border:2.5px solid var(--ink);border-radius:12px;box-shadow:0 8px 0 var(--ink),0 28px 44px rgba(0,0,0,.45);transition:transform .25s}
/* airmail border: slanted terracotta and sky stripes, inset from the edge */
.env-body::before{content:"";position:absolute;inset:9px;border-radius:7px;padding:5px;background:repeating-linear-gradient(-45deg,#C96F4F 0 14px,#F3E7D0 14px 22px,#7FA8C6 22px 36px,#F3E7D0 36px 44px);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.8}
.envelope:hover .env-body{transform:translateY(-3px)}
.env-flap{position:absolute;left:0;right:0;top:0;height:54%;transform-origin:top;transition:transform .6s,filter .25s;z-index:2;width:100%;filter:drop-shadow(0 3px 0 rgba(43,38,32,.28))}
.mail[data-state="open"] .env-flap{transform:rotateX(180deg)}
.envelope:hover .env-flap{transform:rotateX(14deg)}
.mail[data-state="open"] .envelope:hover .env-flap{transform:rotateX(180deg)}
.seal{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-6deg);width:64px;height:64px;border-radius:46% 54% 50% 50%/52% 46% 54% 48%;background:radial-gradient(circle at 35% 30%,#D2603F,#B8472E 60%,#97402A);border:2.5px solid var(--ink);display:grid;place-items:center;z-index:3;box-shadow:0 4px 0 var(--ink);transition:opacity .3s,transform .25s}
.seal::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1.5px dashed rgba(255,248,238,.65)}
.envelope:hover .seal{transform:translate(-50%,-50%) rotate(-6deg) scale(1.07)}
.mail[data-state="open"] .seal{opacity:0}
.env-addr{position:absolute;left:8%;bottom:12%;width:44%;font-size:15px;color:var(--ink-soft)}
.env-addr b{display:block;font:800 22px var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--ink);margin-bottom:4px}
.env-addr i{display:block;height:2px;background:rgba(43,38,32,.35);margin:11px 0 9px}
.env-addr span{font-size:13.5px}
/* washi tape on the envelope's lower-left corner */
.env-tape{position:absolute;left:-14px;bottom:18px;width:84px;height:24px;transform:rotate(-38deg);z-index:3}

.tape{background:repeating-linear-gradient(90deg,rgba(230,188,98,.88) 0 9px,rgba(251,246,234,.7) 9px 14px);border:1.5px solid rgba(43,38,32,.28);box-shadow:0 2px 0 rgba(43,38,32,.18);clip-path:polygon(0 8%,4% 0,8% 8%,12% 0,16% 8%,20% 0,24% 8%,28% 0,32% 8%,36% 0,40% 8%,44% 0,48% 8%,52% 0,56% 8%,60% 0,64% 8%,68% 0,72% 8%,76% 0,80% 8%,84% 0,88% 8%,92% 0,96% 8%,100% 0,100% 100%,96% 92%,92% 100%,88% 92%,84% 100%,80% 92%,76% 100%,72% 92%,68% 100%,64% 92%,60% 100%,56% 92%,52% 100%,48% 92%,44% 100%,40% 92%,36% 100%,32% 92%,28% 100%,24% 92%,20% 100%,16% 92%,12% 100%,8% 92%,4% 100%,0 92%)}
.tape.sage{background:repeating-linear-gradient(90deg,rgba(168,193,121,.9) 0 9px,rgba(251,246,234,.7) 9px 14px)}
.tape.rose{background:repeating-linear-gradient(135deg,rgba(227,160,142,.9) 0 7px,rgba(251,246,234,.7) 7px 12px)}

/* ---- stamp and postmark ---- */
.stampw{position:absolute;right:6%;bottom:10%;z-index:3;transform:rotate(3deg);filter:drop-shadow(0 3px 0 rgba(43,38,32,.45))}
.stamp{position:relative;width:112px;padding:9px;background:#FBF6EA;-webkit-mask:linear-gradient(#000 0 0) center/calc(100% - 16px) calc(100% - 16px) no-repeat,radial-gradient(circle at 8px 8px,#0000 5px,#000 5.5px) -8px -8px/16px 16px;mask:linear-gradient(#000 0 0) center/calc(100% - 16px) calc(100% - 16px) no-repeat,radial-gradient(circle at 8px 8px,#0000 5px,#000 5.5px) -8px -8px/16px 16px}
.stamp canvas{display:block;width:100%;height:auto;border:1.5px solid rgba(43,38,32,.7);outline:3px solid #F3E7D0;outline-offset:-5px;aspect-ratio:7/8}
.stamp span{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;letter-spacing:.12em;color:var(--ink-soft);margin-top:5px;padding:0 3px}
.stamp span::after{content:"1";font:800 15px var(--display);letter-spacing:0;color:var(--action)}
.pmark{position:absolute;width:96px;height:96px;left:-66px;bottom:-16px;transform:rotate(-14deg);opacity:.8;pointer-events:none;mix-blend-mode:multiply}
.pm-host{position:absolute;inset:0;pointer-events:none}

/* ---- buttons ---- */
.openbtn{position:absolute;left:50%;bottom:-74px;transform:translateX(-50%);white-space:nowrap}
.mail[data-state="open"] .openbtn{display:none}
.collect{display:flex;align-items:center;justify-content:center;gap:10px;height:58px;font-size:19px;border-radius:30px 34px 28px 32px;letter-spacing:.01em;box-shadow:0 5px 0 var(--ink),inset 0 0 0 3px rgba(255,248,238,.28)}
.collect:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink),inset 0 0 0 3px rgba(255,248,238,.28)}
.collect:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink),inset 0 0 0 3px rgba(255,248,238,.28)}
.collect svg{flex:0 0 auto;transition:transform .25s}
.collect:hover svg{transform:translateX(4px)}

/* ---- postcard ---- */
.postcard{position:relative;width:100%;display:grid;grid-template-columns:1fr 1fr;background-color:#FBF6EA;background-image:var(--grain);border:2.5px solid var(--ink);border-radius:14px;box-shadow:0 8px 0 var(--ink),0 28px 48px rgba(0,0,0,.45);visibility:hidden;opacity:0;transform:translateY(70px) rotate(-3deg) scale(.88);transition:opacity .5s .6s,transform .7s .6s cubic-bezier(.2,.9,.3,1.15)}
.postcard::before{content:"";position:absolute;inset:7px;border:1.5px dashed rgba(43,38,32,.28);border-radius:9px;pointer-events:none}
.mail[data-state="open"] .postcard{visibility:visible;opacity:1;transform:none}
.pc-tape{position:absolute;right:-18px;top:14px;width:78px;height:24px;transform:rotate(38deg);z-index:4}
.pc-photo{padding:30px 16px 26px 28px;display:flex;align-items:center}
/* polaroid: thick bottom margin, handwritten-style caption, two strips of washi tape */
.photo{position:relative;margin:0;width:100%;background:#FFFDF7;padding:11px 11px 14px;border:2.5px solid var(--ink);box-shadow:0 6px 0 rgba(43,38,32,.35),0 14px 20px rgba(43,38,32,.22);transform:rotate(-2.2deg)}
.photo .tape{position:absolute;width:70px;height:22px;z-index:2}
.photo .tape.t1{left:-22px;top:-8px;transform:rotate(-34deg)}
.photo .tape.t2{right:-22px;top:-8px;transform:rotate(34deg)}
.photo canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;background:var(--haze);border:1.5px solid rgba(43,38,32,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.photo figcaption{text-align:center;font:italic 700 18px var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;margin-top:13px;color:var(--ink-soft);letter-spacing:.01em}
.pc-text{padding:22px 24px 22px 22px;border-left:2px dashed rgba(43,38,32,.3);display:flex;flex-direction:column;gap:12px;position:relative}
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;min-height:128px}
.pc-head h2{font-size:32px;margin:4px 0 0}
.pc-head .stampw{position:relative;right:auto;bottom:auto;flex:0 0 auto;margin-right:4px}
.pc-msg{margin:0;font-size:15.5px;line-height:1.55;background:repeating-linear-gradient(transparent 0 23px,rgba(43,38,32,.12) 23px 24px);color:var(--ink)}
.away{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-radius:14px;background:var(--paper-2);border:2.5px solid var(--ink);font-size:14px}
.away b{font-size:19px;font-weight:400}
.bars{display:flex;height:16px;border-radius:9px;overflow:hidden;border:2.5px solid var(--ink)}
.bars i{display:block}
.cap{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin-top:-6px}
.gain{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gain div{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;border:2.5px solid var(--ink);background:var(--paper);box-shadow:0 3px 0 var(--ink)}
.gain b{font-size:24px;font-weight:400;display:block;line-height:1;font-variant-numeric:tabular-nums}
.gain small{font-size:13px;color:var(--ink-soft)}
.gain .badge{width:40px;height:40px}
.ps{margin:0;font-size:12.5px;color:var(--sky-ink)}
@media (max-width:760px){.postcard{grid-template-columns:1fr}.pc-text{border-left:0;border-top:2px dashed rgba(43,38,32,.3)}.pc-photo{padding-bottom:6px}}