/* Not My Event: the looks of the scratch-off prize cards beyond the first (the first, the Wishbone Scratch-Off, is in card-designs.css). The pages are made by scripts/make-envelope-cards.mjs and
   scripts/envelope-scratch.mjs. One block per design, and each card has its OWN structure, copy and fonts:
     d-lturkey  Lucky Turkey        a lottery ticket (Bevan)                        d-party   Gobble Party       a party poster (Lilita One)
     d-slice    Lucky Slice         a pie-shop menu (Chewy)                          d-cheers  Friends Cheers     a toast (Pacifico)
     d-silver   Gold & Silver Wish  an engraved invitation (Cinzel)                 d-corn    Cornucopia Luck    a harvest almanac (Lobster Two)
     d-xmorn    Christmas Morning   a gift tag (Mountains of Christmas)             d-xeve    Silent Night Wish  a little poem (Great Vibes)
   The back layer of each one is alive (see envelope-card.js): .prop buttons react to a tap, [data-depth] layers drift with a finger, and body gets "scratching", "won", "lost" and the classes
   a prop asks for (flash, clink, fizz, chase, fly) for a moment, which the blocks below use to make the whole room react. */
body[class*="d-"] { --pu: clamp(46px, min(8.6vh, 15vw), 108px); }
:where(.k-scratch) .card-in { isolation: isolate; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 6.5) calc(var(--u) * 7); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prop svg { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
@keyframes sc-flick { from { transform: scale(1, .92) skewX(-3deg); } to { transform: scale(1.06, 1.08) skewX(3deg); } }
@keyframes sc-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes sc-tw { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes sc-steam { 0% { opacity: 0; transform: translateY(8px); } 50% { opacity: .9; } 100% { opacity: 0; transform: translateY(-12px); } }

/* ====================================================== Lucky Turkey: a lottery ticket ====================================================== */
body.d-lturkey { --bg: #2a1a10; --env-back: #a9763a; --env-l: #ead7b0; --env-r: #e6d0a6; --env-b: #f0dfbc; --flap: #e2c890; --flap-in: #a9763a; --edge: rgba(110, 70, 30, .6);
  --paper: #fbf3df; --ink: #5a2e12; --ink-soft: #8a5a3a; --accent: #b4491f; --ray1: #fff3cc; --ray2: #ffe19a; --display: "Bevan", Georgia, serif; --body: "Nunito", system-ui, sans-serif; --t1: 8.2; --t2: 7; --t3: 6; color: #f6e4c0; }
/* The field: a sunset sky with two slow clouds, hills with a barn and two autumn trees, and a field with five more turkeys walking about in it, small and pale far back, bigger up close. In front of the envelope (and behind the card once it is out) a turkey strolls back and forth in front of one long fence. When the card opens, the whole pen steps down to the bottom of the screen so the turkey stays in sight. Everything is placed from the envelope's own size (--e3 repeats the scene's envelope width). */
body.d-lturkey { --e3: min(88vw, 470px, calc(100svh * .72 - 28px)); --hz: 38svh; --gy: calc(50svh + var(--e3) * .345); --gy2: calc(100svh - 3svh); --drop: max(0px, calc(var(--gy2) - var(--gy))); --bw: calc(var(--e3) * .36); --fl: max(0px, calc(50vw - var(--e3) * .66));
  --x0: calc(var(--fl) + var(--e3) * .035); --x1: calc(100vw - var(--x0) - var(--bw)); }
.d-lturkey .sky { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--hz) + 2px); background: radial-gradient(ellipse 40% 34% at 22% 100%, rgba(255, 226, 150, .75), transparent 72%), linear-gradient(180deg, #2d3568 0%, #8b4d86 46%, #e8794a 82%, #f7bd62 100%); }
.d-lturkey .cloud { position: absolute; left: 0; border-radius: 99px; background: rgba(255, 205, 175, .5); filter: blur(1.5px); animation: lt-cloud 120s linear infinite; } @keyframes lt-cloud { from { transform: translateX(-35vmin); } to { transform: translateX(110vw); } }
.d-lturkey .cl1 { top: 12svh; width: 22vmin; height: 3svh; } .d-lturkey .cl2 { top: 24svh; width: 30vmin; height: 3.6svh; animation-duration: 160s; animation-delay: -70s; }
.d-lturkey .hill { position: absolute; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.d-lturkey .h1 { left: -12%; width: 64%; height: 11svh; top: calc(var(--hz) - 10svh); background: #6f5588; } .d-lturkey .h2 { left: 34%; width: 80%; height: 9svh; top: calc(var(--hz) - 8svh); background: #7d5f8e; }
.d-lturkey .h3 { left: -20%; width: 90%; height: 7svh; top: calc(var(--hz) - 5svh); background: #5d6b2c; } .d-lturkey .h4 { right: -15%; width: 55%; height: 7svh; top: calc(var(--hz) - 5svh); background: #66752f; }
.d-lturkey .field { position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0; overflow: hidden; background: linear-gradient(180deg, #8a9638 0%, #667630 22%, #46561f 70%, #34411a 100%); }
.d-lturkey .field::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 30% at 22% 0%, rgba(255, 196, 96, .38), transparent 70%); }
.d-lturkey .vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .45)); pointer-events: none; }
.d-lturkey .p-tree1 { left: 7%; top: calc(var(--hz) - 1.5svh - var(--pu) * .95); width: calc(var(--pu) * .7); } .d-lturkey .p-tree2 { left: 15%; top: calc(var(--hz) - 1.5svh - var(--pu) * .75); width: calc(var(--pu) * .55); }
.d-lturkey .p-barn { right: 6%; top: calc(var(--hz) - 1.5svh - var(--pu) * 1.15); width: calc(var(--pu) * 1.5); }
/* Five more turkeys walking about in the field: far ones are small and pale and walk slowly, near ones are bigger; the ones walking left are flipped */
.d-lturkey .bt { position: absolute; left: 0; top: calc(var(--y) * 1svh); height: 0; width: calc(var(--e3) * var(--s)); animation: bt-go var(--d) linear var(--o) infinite; } .d-lturkey .bt.bl { animation-direction: reverse; }
.d-lturkey .bt svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; overflow: visible; } .d-lturkey .bt.bl svg { transform: scaleX(-1); } .d-lturkey .bt.far { opacity: .85; filter: saturate(.8) brightness(.92); }
@keyframes bt-go { from { translate: -22vw 0; } to { translate: 105vw 0; } }
/* In front of the envelope: the pen (one long fence the length of the card) and the turkey, on a ground line just under the envelope */
/* behind the card while the envelope is closed (the turkey is in front of the envelope); once the card is out, the turkey walks in front of it (the switch waits until the pen has stepped most of the way down) */
.d-lturkey .lt-fore { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; transition: z-index 0s linear 1.4s; } .d-lturkey .pop .lt-fore { z-index: 6; }
.d-lturkey .lt-lane { position: absolute; left: 0; right: 0; top: var(--gy); height: 0; transition: translate 1.3s cubic-bezier(.5, 0, .25, 1) .45s; } .d-lturkey .pop .lt-lane { translate: 0 var(--drop); }
.d-lturkey .lt-fence { position: absolute; left: var(--fl); right: var(--fl); bottom: calc(var(--e3) * .012); height: calc(var(--e3) * .095); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); } .d-lturkey .lt-fence svg { display: block; width: 100%; height: 100%; }
.d-lturkey .lt-walk { position: absolute; left: 0; bottom: 0; width: var(--bw); animation: lt-walk 14s linear infinite; }
@keyframes lt-walk { 0% { translate: var(--x0) 0; } 46% { translate: var(--x1) 0; } 50% { translate: var(--x1) 0; } 96% { translate: var(--x0) 0; } 100% { translate: var(--x0) 0; } }
.d-lturkey .lt-tap { display: block; width: 100%; padding: 0; border: 0; background: none; pointer-events: none; -webkit-tap-highlight-color: transparent; } .d-lturkey .done .lt-tap { pointer-events: auto; cursor: pointer; }
.d-lturkey .lt-bird { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; animation: lt-turn 14s linear infinite; filter: drop-shadow(0 0 2px rgba(255, 230, 180, .5)); }
@keyframes lt-turn { 0%, 45% { transform: scaleX(1); } 49%, 95% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.d-lturkey .lt-l1, .d-lturkey .lt-l2 { transform-box: fill-box; transform-origin: 50% 0; animation: lt-step var(--stp, .7s) ease-in-out infinite alternate; } .d-lturkey .lt-l2 { animation-direction: alternate-reverse; } @keyframes lt-step { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.d-lturkey .lt-body { animation: lt-bob .35s ease-in-out infinite alternate; } @keyframes lt-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.d-lturkey .lt-head { transform-box: fill-box; transform-origin: 30% 100%; animation: lt-peck .7s ease-in-out infinite alternate; } @keyframes lt-peck { from { transform: translateX(0); } to { transform: translateX(5px) rotate(4deg); } } .d-lturkey.scratching .lt-head { animation-duration: .22s; }
.d-lturkey .lt-fan { transform-box: fill-box; transform-origin: 70% 100%; transition: transform .4s ease; } .d-lturkey.won .lt-fan { transform: scale(1.12); }
.d-lturkey.won .lt-hop, .d-lturkey .lt-tap.hit .lt-hop { animation: lt-hop .55s ease-out infinite; } .d-lturkey .lt-tap.hit .lt-hop { animation-iteration-count: 2; } @keyframes lt-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } }
.d-lturkey.lost .lt-head { animation: none; transform: rotate(16deg) translateY(4px); }
.d-lturkey .tap-hint, .d-lturkey .quiet { color: #f6e4c0; font-family: var(--body); }
.d-lturkey .lt-ribbon { position: absolute; z-index: 3; left: 0; right: 0; top: 43%; height: 14%; display: grid; place-items: center; background: #b4491f; color: #fbe9c8; font: 400 calc(var(--ew) * .055) / 1 var(--display); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.d-lturkey .go .lt-ribbon { animation: em-untie .4s ease-in forwards; }
.d-lturkey .seal { background: radial-gradient(circle at 35% 30%, #c8752f, #8a3b14 60%, #4a1c08); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); } .d-lturkey .seal svg { width: 70%; height: 70%; }
.d-lturkey .card { background: #fbf3df; border-radius: 6px; color: var(--ink); background-image: radial-gradient(rgba(180, 120, 40, .12) 1px, transparent 1.4px); background-size: calc(var(--u) * 2.4) calc(var(--u) * 2.4);
  box-shadow: 0 0 0 calc(var(--u) * 1.4) #b4491f, 0 0 0 calc(var(--u) * 2) #fbf3df, 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .4), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-lturkey .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.4); border: 2px dashed rgba(180, 73, 31, .45); border-radius: 4px; pointer-events: none; }
.d-lturkey .tk-head { display: flex; flex-direction: column; align-items: center; line-height: 1; } .d-lturkey .tk-head span { font: 400 calc(var(--u) * 5) / 1 var(--display); letter-spacing: .3em; color: #d99a2e; text-transform: uppercase; }
.d-lturkey .tk-head b { font: 400 calc(var(--u) * 10) / 1 var(--display); letter-spacing: .03em; color: #8a3b1b; text-shadow: 0 calc(var(--u) * .5) 0 #f3d98a; } .d-lturkey .tk-head i { margin-top: calc(var(--u) * .8); font: 800 calc(var(--u) * 2.7) / 1 var(--body); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.d-lturkey .tk-hey { font: 800 calc(var(--u) * 3.3) / 1.2 var(--body); color: var(--ink-soft); } .d-lturkey .title { font-family: var(--display); color: #7a3b14; }
.d-lturkey .tk-odds { padding: calc(var(--u) * .8) calc(var(--u) * 3); border-radius: 99px; background: rgba(217, 154, 46, .22); font: 700 calc(var(--u) * 3.1) / 1.2 var(--body); color: #8a3b1b; } .d-lturkey .tk-odds b { font-weight: 800; }
.d-lturkey .tk-when { font: 800 calc(var(--u) * 4.4) / 1.1 var(--body); letter-spacing: .08em; color: #5a2e12; } .d-lturkey .tk-where { font: 700 calc(var(--u) * 3.6) / 1.2 var(--body); color: var(--ink-soft); }
.d-lturkey .note { font: italic 600 calc(var(--u) * 3.5) / 1.3 var(--body); color: var(--ink-soft); } .d-lturkey .tk-void { font: italic 600 calc(var(--u) * 2.9) / 1.25 var(--body); color: var(--ink-soft); }
.d-lturkey .pt { position: absolute; z-index: 3; left: calc(var(--u) * 1); top: calc(var(--u) * 42); width: calc(var(--u) * 27); rotate: -7deg; pointer-events: none; }
.d-lturkey .sprig { position: absolute; z-index: 3; pointer-events: none; } .d-lturkey .sprig.s1 { right: calc(var(--u) * 1); top: calc(var(--u) * 44); width: calc(var(--u) * 21); rotate: 18deg; } .d-lturkey .sprig.s2 { left: calc(var(--u) * 3); top: calc(var(--u) * 3); width: calc(var(--u) * 16); rotate: -12deg; }
.d-lturkey .scratch { box-shadow: 0 0 0 calc(var(--u) * 1.2) #b4491f, 0 0 0 calc(var(--u) * 1.8) #fbf3df, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(120, 60, 10, .4); }
.d-lturkey .prize { background: radial-gradient(circle, #fffaf0, #f7e4ae); color: var(--ink); } .d-lturkey .p-label { font-family: var(--body); font-weight: 800; color: #8a6420; } .d-lturkey .p-text { font-family: var(--display); color: #9a3412; }
.d-lturkey .scratch-hint { font: 800 calc(var(--u) * 3) / 1.25 var(--body); color: var(--accent); }

/* ====================================================== Gobble Party: a party poster ====================================================== */
body.d-party { --bg: #1b0d3a; --env-back: #7a3ff2; --env-l: #ff9a3d; --env-r: #ff8a2a; --env-b: #ffa94d; --flap: #ff6f9a; --flap-in: #7a3ff2; --edge: rgba(90, 31, 138, .7);
  --paper: #fff; --ink: #3a1060; --ink-soft: #6a3a9a; --accent: #e0245e; --ray1: #fff3a8; --ray2: #ffd0ee; --display: "Lilita One", Impact, sans-serif; --body: "Fredoka", system-ui, sans-serif; --t1: 9; --t2: 7.4; --t3: 6.2; color: #fff; }
.d-party .beams { position: absolute; inset: -30%; background: conic-gradient(from 0deg at 50% 38%, rgba(255, 79, 154, .38), transparent 12%, rgba(46, 196, 182, .38) 20%, transparent 32%, rgba(255, 210, 63, .38) 42%, transparent 54%, rgba(138, 92, 255, .42) 64%, transparent 76%, rgba(255, 159, 28, .38) 86%, transparent); mix-blend-mode: screen; animation: pa-spin 14s linear infinite; }
@keyframes pa-spin { to { transform: rotate(360deg); } } .d-party.won .beams, .d-party.flash .beams { animation-duration: 2.4s; }
.d-party .floorglow { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(0deg, rgba(255, 79, 154, .4), transparent); }
.d-party .p-disco { left: 50%; top: -1%; width: calc(var(--pu) * 1.1); margin-left: calc(var(--pu) * -.55); } .d-party .p-disco svg { transform-origin: 50% 0; animation: pa-sway 4s ease-in-out infinite alternate; } .d-party.flash .p-disco svg { filter: brightness(2) drop-shadow(0 0 24px #fff); }
@keyframes pa-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.d-party .p-b1 { left: 3%; top: 8%; width: calc(var(--pu) * .7); animation: sc-float 5s ease-in-out infinite; } .d-party .p-b2 { right: 4%; top: 12%; width: calc(var(--pu) * .65); animation: sc-float 6s ease-in-out -2s infinite; } .d-party .p-b3 { left: 9%; bottom: 24%; width: calc(var(--pu) * .6); animation: sc-float 5.5s ease-in-out -1s infinite; }
.d-party.won .p-b1, .d-party.won .p-b2, .d-party.won .p-b3 { scale: 1.25; }
.d-party .p-dancer { left: 1%; bottom: 0; width: calc(var(--pu) * 1.7); } .d-party .dancer { transform-origin: 50% 100%; animation: pa-dance .8s ease-in-out infinite alternate; } .d-party.won .dancer { animation-duration: .22s; }
@keyframes pa-dance { from { transform: rotate(-5deg) scaleY(.97); } to { transform: rotate(5deg) scaleY(1.03); } } .d-party .p-pie { right: 1%; bottom: 1%; width: calc(var(--pu) * 1.6); }
.d-party .tap-hint, .d-party .quiet { color: #fff; font-family: var(--body); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.d-party .pt-dots { position: absolute; z-index: 2; inset: 0; border-radius: 3px; background: radial-gradient(circle, rgba(255, 255, 255, .55) 3px, transparent 3.5px) 0 0 / 22px 22px; pointer-events: none; } .d-party .go .pt-dots { animation: em-untie .4s ease-in forwards; }
.d-party .seal { background: none; box-shadow: none; } .d-party .seal svg { width: 150%; height: 150%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.d-party .card { background: linear-gradient(160deg, #ffb347, #ff6f91 60%, #c85bff); border-radius: 14px; color: #fff; box-shadow: 0 0 0 calc(var(--u) * 1.2) #fff, 0 0 0 calc(var(--u) * 2.2) #3a1060, 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-party .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.4); border: 2px dotted rgba(255, 255, 255, .8); border-radius: 10px; pointer-events: none; }
.d-party .gp-warn { font: 400 calc(var(--u) * 3.4) / 1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: #ffe066; }
.d-party .title { font-family: var(--display); color: #fff; -webkit-text-stroke: calc(var(--u) * .5) #3a1060; paint-order: stroke fill; text-shadow: 0 calc(var(--u) * .8) 0 #3a1060; text-transform: uppercase; }
.d-party .gp-sub { max-width: 32ch; font: 600 calc(var(--u) * 3.1) / 1.2 var(--body); }
.d-party .gp-date { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 0 calc(var(--u) * 2); padding: calc(var(--u) * 1) calc(var(--u) * 4); border-radius: calc(var(--u) * 3); background: #3a1060; color: #ffd23f; font-family: var(--display); rotate: -2deg; }
.d-party .gp-date b { font-size: calc(var(--u) * 3.6); font-weight: 400; letter-spacing: .1em; } .d-party .gp-date em { font-style: normal; font-size: calc(var(--u) * 9); line-height: 1; } .d-party .gp-date > span:not(.sr) { grid-column: 1 / -1; text-align: center; font-size: calc(var(--u) * 3.4); color: #fff; }
.d-party .gp-where { font: 600 calc(var(--u) * 3.7) / 1.2 var(--body); } .d-party .gp-where u { text-decoration: none; color: #ffe066; } .d-party .note { color: #fff; font: 500 calc(var(--u) * 3.4) / 1.25 var(--body); font-style: normal; }
.d-party .gp-host { font: 600 calc(var(--u) * 3.3) / 1.25 var(--body); }
.d-party .scratch { box-shadow: 0 0 0 calc(var(--u) * 1.4) #fff, 0 0 0 calc(var(--u) * 2.6) #e0245e, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, .35); }
.d-party .prize { background: radial-gradient(circle, #fff, #ffe6f2); color: var(--ink); } .d-party .p-label { font-family: var(--body); font-weight: 600; color: #c2186b; } .d-party .p-text { font-family: var(--display); color: #e0245e; }
.d-party .scratch-hint { font: 600 calc(var(--u) * 3.3) / 1.2 var(--body); letter-spacing: .06em; color: #fff; text-transform: none; }

/* ====================================================== Lucky Slice: a pie-shop menu ====================================================== */
body.d-slice { --bg: #8a1f1f; --env-back: #7a2a1a; --env-l: #fffaf0; --env-r: #fbf2e0; --env-b: #fffdf6; --flap: #d4a24a; --flap-in: #8a5a22; --edge: rgba(160, 40, 40, .7);
  --paper: #fffaf0; --ink: #5a1a1a; --ink-soft: #8a4a3a; --accent: #c62828; --ray1: #fff6d8; --ray2: #ffe6a8; --display: "Chewy", system-ui, sans-serif; --body: "Patrick Hand", system-ui, cursive; --t1: 11; --t2: 9; --t3: 7.4; color: #fff6e0; }
.d-slice .gingham { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(198, 40, 40, .88) 50%, transparent 50%) 0 0 / 84px 84px, linear-gradient(rgba(198, 40, 40, .88) 50%, transparent 50%) 0 0 / 84px 84px, #fff7ea; }
.d-slice .vig { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 230, 170, .35), transparent 60%), radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(60, 10, 10, .55)); }
.d-slice .p-pie { left: 50%; bottom: 1%; width: calc(var(--pu) * 2.2); margin-left: calc(var(--pu) * -1.1); } .d-slice .p-can { right: 3%; bottom: 3%; width: calc(var(--pu) * .55); } .d-slice .p-mug { left: 3%; bottom: 3%; width: calc(var(--pu) * 1); } .d-slice .p-fork { left: 6%; top: 3%; width: calc(var(--pu) * .4); rotate: 25deg; }
.d-slice .steam { transform-box: fill-box; animation: sc-steam 3s ease-in-out infinite; } .d-slice.won .steam, .d-slice.scratching .steam { animation-duration: 1.1s; }
.d-slice .tap-hint, .d-slice .quiet { color: #fff6e0; font-family: var(--body); text-shadow: 0 1px 6px rgba(60, 10, 10, .8); }
.d-slice .sl-gingham { position: absolute; z-index: 1; inset: 0; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, rgba(198, 40, 40, .55) 50%, transparent 50%) 0 0 / 26px 26px, linear-gradient(rgba(198, 40, 40, .55) 50%, transparent 50%) 0 0 / 26px 26px; pointer-events: none; } .d-slice .go .sl-gingham { opacity: 0; transition: opacity .3s; }
.d-slice .sl-tag { position: absolute; z-index: 3; right: 6%; top: 8%; padding: 2% 3%; background: #fff; border: 2px dashed #c62828; color: #c62828; font: 400 calc(var(--ew) * .04) / 1 var(--display); letter-spacing: .08em; text-transform: uppercase; rotate: 4deg; } .d-slice .go .sl-tag { animation: em-untie .4s ease-in forwards; }
.d-slice .seal { background: none; box-shadow: none; } .d-slice .seal svg { width: 135%; height: 135%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.d-slice .card { background: #fffaf0; border-radius: 6px; color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * 1) #c62828, 0 0 0 calc(var(--u) * 1.6) #fffaf0, 0 0 0 calc(var(--u) * 2.6) rgba(0, 0, 0, .35), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(60, 10, 10, .5); }
.d-slice .card::before, .d-slice .card::after { content: ""; position: absolute; left: 0; right: 0; height: calc(var(--u) * 4.4); background: linear-gradient(90deg, rgba(198, 40, 40, .9) 50%, transparent 50%) 0 0 / calc(var(--u) * 4.4) calc(var(--u) * 4.4), linear-gradient(rgba(198, 40, 40, .9) 50%, transparent 50%) 0 0 / calc(var(--u) * 4.4) calc(var(--u) * 4.4), #fff; border-radius: 6px 6px 0 0; }
.d-slice .card::before { top: 0; } .d-slice .card::after { bottom: 0; border-radius: 0 0 6px 6px; }
.d-slice .card-in { padding-top: calc(var(--u) * 9); padding-bottom: calc(var(--u) * 8); }
.d-slice .mn-top { font: 400 calc(var(--u) * 3.8) / 1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #c62828; } .d-slice .title { font-family: var(--display); color: #c62828; text-shadow: 0 calc(var(--u) * .5) 0 #f3d98a; }
.d-slice .mn-list { width: 100%; margin: 0; display: grid; gap: calc(var(--u) * .5); font: 400 calc(var(--u) * 3.9) / 1.15 var(--body); color: #5a1a1a; text-align: left; } .d-slice .mn-list > div { display: flex; align-items: baseline; gap: calc(var(--u) * 1); }
.d-slice .mn-list dt { display: flex; flex: 1; font-weight: 700; } .d-slice .mn-list dt::after { content: ""; flex: 1; margin: 0 calc(var(--u) * .8); border-bottom: 2px dotted rgba(90, 26, 26, .5); transform: translateY(-4px); } .d-slice .mn-list dd { margin: 0; flex: none; max-width: 62%; text-align: right; }
.d-slice .note { font: 400 calc(var(--u) * 3.8) / 1.2 var(--body); font-style: normal; color: var(--ink-soft); } .d-slice .mn-foot { font: 400 calc(var(--u) * 3.5) / 1.2 var(--display); color: #c62828; }
.d-slice .scratch { box-shadow: 0 0 0 calc(var(--u) * 1.2) #b9732a, 0 0 0 calc(var(--u) * 1.8) #fffaf0, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(90, 40, 10, .4); }
.d-slice .prize { background: radial-gradient(circle, #fffaf0, #f7d9a0); color: var(--ink); } .d-slice .p-label { font-family: var(--body); font-weight: 700; color: #8a4a3a; } .d-slice .p-text { font-family: var(--display); color: #c62828; }
.d-slice .scratch-hint { font: 400 calc(var(--u) * 3.6) / 1.2 var(--body); color: #c62828; text-transform: none; letter-spacing: .02em; }

/* ====================================================== Friends Cheers: a toast ====================================================== */
body.d-cheers { --bg: #0b2a30; --env-back: #0b3b3f; --env-l: #17707a; --env-r: #146069; --env-b: #1d8590; --flap: #1d8590; --flap-in: #0b3b3f; --edge: rgba(232, 163, 124, .85);
  --paper: #fffaf0; --ink: #0b3b3f; --ink-soft: #4a7a7e; --accent: #b8683e; --ray1: #fff0e0; --ray2: #ffd9bd; --display: "Pacifico", cursive; --body: "Quicksand", system-ui, sans-serif; --t1: 8; --t2: 6.6; --t3: 5.6; color: #ffe6d0; }
.d-cheers .bg { background: radial-gradient(circle at 14% 30%, rgba(255, 190, 110, .3) 0 7%, transparent 8%), radial-gradient(circle at 84% 22%, rgba(255, 170, 120, .28) 0 9%, transparent 10%), radial-gradient(circle at 70% 80%, rgba(255, 200, 130, .26) 0 8%, transparent 9%), radial-gradient(circle at 24% 84%, rgba(120, 220, 210, .2) 0 8%, transparent 9%), linear-gradient(180deg, #0f3a42, #071c22); }
.d-cheers .lightstring { position: absolute; left: 0; right: 0; top: 0; height: 56px; background: radial-gradient(circle, #ffe6a8 4px, transparent 5px) 0 16px / 36px 40px repeat-x; animation: sc-tw 2.6s ease-in-out infinite; } .d-cheers.flash .lightstring { filter: brightness(2.4) drop-shadow(0 0 10px #ffe6a8); animation: none; }
.d-cheers .p-flute1 { left: 8%; bottom: 3%; width: calc(var(--pu) * .55); rotate: 10deg; transition: rotate .25s ease; } .d-cheers .p-flute2 { left: 17%; bottom: 3%; width: calc(var(--pu) * .55); rotate: -10deg; transition: rotate .25s ease; }
.d-cheers.clink .p-flute1 { rotate: 24deg; } .d-cheers.clink .p-flute2 { rotate: -24deg; } .d-cheers .p-bottle { right: 6%; bottom: 2%; width: calc(var(--pu) * .7); } .d-cheers.fizz .p-bottle { animation: ch-shake .12s 8; } @keyframes ch-shake { 50% { transform: translateX(3px) rotate(3deg); } }
.d-cheers .p-lights { right: 6%; top: 8%; width: calc(var(--pu) * .5); } .d-cheers .p-lights svg { animation: sc-tw 2s ease-in-out infinite; }
.d-cheers .tap-hint, .d-cheers .quiet { color: #ffe6d0; font-family: var(--body); }
.d-cheers .ch-bulbs { position: absolute; z-index: 2; left: 4%; right: 4%; top: 6%; height: 8%; background: radial-gradient(circle, #ffe6a8 calc(var(--ew) * .011), transparent calc(var(--ew) * .014)) 0 50% / calc(var(--ew) * .07) 100% repeat-x; pointer-events: none; animation: sc-tw 2.4s ease-in-out infinite; } .d-cheers .go .ch-bulbs { animation: em-untie .4s ease-in forwards; }
.d-cheers .seal { background: radial-gradient(circle at 35% 30%, #f0b894, #c07a4a 60%, #7a4424); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); } .d-cheers .seal svg { width: 72%; height: 72%; }
.d-cheers .card { background: #fffaf0; border-radius: 4px; color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * .9) #b8683e, 0 0 0 calc(var(--u) * 1.3) #fffaf0, 0 0 0 calc(var(--u) * 2.5) #0f5257, 0 0 0 calc(var(--u) * 3.1) rgba(0, 0, 0, .35), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-cheers .card-in { padding-top: calc(var(--u) * 5); }
.d-cheers .ch-cheers { font: 400 calc(var(--u) * 12) / 1 var(--display); color: #b8683e; rotate: -4deg; text-shadow: 0 calc(var(--u) * .6) 0 #ffe3d0; } .d-cheers .ch-line { max-width: 30ch; font: 600 calc(var(--u) * 3.8) / 1.25 var(--body); color: var(--ink); }
.d-cheers .title { font-family: var(--body); font-weight: 700; color: #0f5257; text-transform: none; } .d-cheers .ch-when { font: 700 calc(var(--u) * 4.2) / 1.2 var(--body); color: #0f5257; } .d-cheers .ch-where { font: 500 calc(var(--u) * 3.8) / 1.2 var(--body); color: var(--ink-soft); }
.d-cheers .note { font: 500 calc(var(--u) * 3.6) / 1.3 var(--body); font-style: italic; color: var(--ink-soft); } .d-cheers .ch-sign { font: 400 calc(var(--u) * 4.4) / 1.25 var(--display); color: #b8683e; }
.d-cheers .scratch { box-shadow: 0 0 0 calc(var(--u) * 1.2) #b8683e, 0 0 0 calc(var(--u) * 1.8) #fffaf0, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(10, 60, 66, .4); }
.d-cheers .prize { background: radial-gradient(circle, #fffaf0, #ffe3d0); color: var(--ink); } .d-cheers .p-label { font-family: var(--body); font-weight: 700; color: #b8683e; } .d-cheers .p-text { font-family: var(--display); color: #b8683e; }
.d-cheers .scratch-hint { font: 700 calc(var(--u) * 3.2) / 1.2 var(--body); color: #0f5257; }

/* ====================================================== Gold & Silver Wish: an engraved invitation ====================================================== */
body.d-silver { --bg: #14171c; --env-back: #aeb6c0; --env-l: #eef1f4; --env-r: #e6eaee; --env-b: #f6f8fa; --flap: #e9edf1; --flap-in: #c9a24b; --edge: rgba(201, 162, 75, .85);
  --paper: #fcfbf7; --ink: #2e3440; --ink-soft: #6b7280; --accent: #a8862e; --ray1: #ffffff; --ray2: #e9edf2; --display: "Cinzel", Georgia, serif; --body: "Cormorant Garamond", Georgia, serif; --t1: 7.8; --t2: 6.4; --t3: 5.4; color: #e6eaf0; }
.d-silver .bg { background: radial-gradient(circle at 18% 28%, rgba(224, 178, 74, .22) 0 8%, transparent 9%), radial-gradient(circle at 82% 70%, rgba(224, 178, 74, .2) 0 10%, transparent 11%), radial-gradient(circle at 60% 20%, rgba(207, 213, 220, .16) 0 7%, transparent 8%), linear-gradient(180deg, #3b4048, #14171c 70%); }
.d-silver .spot { position: absolute; inset: 0; background: radial-gradient(circle 24vmax at var(--mx, 50%) var(--my, 35%), rgba(255, 244, 214, .3), transparent 70%); mix-blend-mode: screen; pointer-events: none; }
.d-silver .p-o1 { left: 8%; top: 0; width: calc(var(--pu) * .7); } .d-silver .p-o2 { left: 44%; top: 0; width: calc(var(--pu) * .8); } .d-silver .p-o3 { right: 8%; top: 0; width: calc(var(--pu) * .7); }
.d-silver .p-o1 svg, .d-silver .p-o2 svg, .d-silver .p-o3 svg { transform-origin: 50% 0; animation: gs-swing 5s ease-in-out infinite alternate; } .d-silver .p-o2 svg { animation-duration: 6.4s; animation-delay: -2s; } .d-silver .p-o3 svg { animation-duration: 5.6s; animation-delay: -1s; } .d-silver .prop.hit svg { animation: gs-swing-big 1.4s ease-out; }
@keyframes gs-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } @keyframes gs-swing-big { 0% { transform: rotate(0); } 20% { transform: rotate(-24deg); } 45% { transform: rotate(18deg); } 70% { transform: rotate(-9deg); } 100% { transform: rotate(0); } }
.d-silver .p-s1 { left: 16%; top: 22%; width: calc(var(--pu) * .32); } .d-silver .p-s2 { right: 14%; top: 24%; width: calc(var(--pu) * .26); } .d-silver .p-s3 { left: 30%; bottom: 7%; width: calc(var(--pu) * .3); }
.d-silver .p-s1 svg, .d-silver .p-s2 svg, .d-silver .p-s3 svg { animation: sc-tw 3s ease-in-out infinite; } .d-silver .p-s2 svg { animation-delay: -1s; } .d-silver .p-s3 svg { animation-delay: -2s; }
.d-silver .tap-hint, .d-silver .quiet { color: #e6eaf0; font-family: var(--body); letter-spacing: .3em; }
.d-silver .gs-band { position: absolute; z-index: 3; left: 0; right: 0; top: 44%; height: 15%; background: linear-gradient(180deg, #f3e6bd, #d8c28a 55%, #b99c5e); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.d-silver .gs-bow { position: absolute; z-index: 5; left: 50%; top: 51.5%; width: calc(var(--ew) * .22); height: calc(var(--ew) * .12); margin: calc(var(--ew) * -.06) 0 0 calc(var(--ew) * -.11); }
.d-silver .gs-bow i { position: absolute; top: 8%; width: 42%; height: 76%; background: linear-gradient(180deg, #f6ebc6, #c9b277); border-radius: 60% 40% 60% 40%; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } .d-silver .gs-bow i:nth-child(1) { left: 0; transform: rotate(-12deg); } .d-silver .gs-bow i:nth-child(2) { right: 0; transform: scaleX(-1) rotate(-12deg); }
.d-silver .gs-bow b { position: absolute; left: 50%; top: 26%; width: 17%; height: 48%; margin-left: -8.5%; border-radius: 40%; background: #b39a5c; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.d-silver .go .gs-band, .d-silver .go .gs-bow { animation: em-untie .5s ease-in forwards; } .d-silver .seal { background: none; box-shadow: none; } .d-silver .seal svg { width: 130%; height: 130%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.d-silver .card { background: #fcfbf7; border-radius: 3px; color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * .9) #aeb6c0, 0 0 0 calc(var(--u) * 1.3) #fcfbf7, 0 0 0 calc(var(--u) * 2.3) #c9a24b, 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .4), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-silver .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.8); border: 1px solid #c9a24b; pointer-events: none; }
.d-silver .gs-top { font: 500 calc(var(--u) * 2.9) / 1.7 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } .d-silver .title { font-family: var(--display); font-weight: 700; letter-spacing: .04em; color: #2e3440; text-transform: uppercase; }
.d-silver .gs-rule { display: flex; align-items: center; gap: calc(var(--u) * 2); width: 50%; color: #c9a24b; } .d-silver .gs-rule i { flex: 1; height: 1px; background: currentColor; }
.d-silver .gs-line { font: 600 calc(var(--u) * 4.5) / 1.15 var(--body); letter-spacing: .04em; color: var(--ink); } .d-silver .gs-where { font-style: italic; font-weight: 500; color: var(--ink-soft); }
.d-silver .gs-motto { max-width: 26ch; font: italic 500 calc(var(--u) * 3.7) / 1.25 var(--body); color: #8a6a22; } .d-silver .note { font: italic 500 calc(var(--u) * 3.5) / 1.3 var(--body); color: var(--ink-soft); } .d-silver .gs-host { font: 600 calc(var(--u) * 3.6) / 1.2 var(--body); letter-spacing: .08em; }
.d-silver .gs-sp { position: absolute; z-index: 2; width: calc(var(--u) * 4); height: calc(var(--u) * 4); background: #c9a24b; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; } .d-silver .gs-sp.a { left: 8%; top: 7%; } .d-silver .gs-sp.b { right: 8%; top: 12%; } .d-silver .gs-sp.c { right: 10%; bottom: 7%; }
.d-silver.opened .gs-sp { animation: sc-tw 3.2s ease-in-out infinite; } .d-silver.opened .gs-sp.b { animation-delay: -1s; } .d-silver.opened .gs-sp.c { animation-delay: -2s; }
.d-silver .scratch { box-shadow: 0 0 0 calc(var(--u) * 1) #aeb6c0, 0 0 0 calc(var(--u) * 1.5) #fcfbf7, 0 0 0 calc(var(--u) * 2.1) #c9a24b, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(40, 44, 52, .4); }
.d-silver .prize { background: radial-gradient(circle, #fff, #eef1f4); color: var(--ink); } .d-silver .p-label { font-family: var(--display); color: #8a6a22; letter-spacing: .26em; } .d-silver .p-text { font-family: var(--display); font-weight: 700; color: #8a6a22; }
.d-silver .scratch-hint { font: 500 calc(var(--u) * 3.3) / 1.2 var(--body); letter-spacing: .2em; color: var(--ink-soft); }

/* ====================================================== Cornucopia Luck: a harvest almanac, on a farm ====================================================== */
body.d-corn { --bg: #2a1020; --env-back: #8a6a3a; --env-l: #cfa971; --env-r: #c79f66; --env-b: #d6b27a; --flap: #c9a066; --flap-in: #8a6a3a; --edge: rgba(90, 56, 22, .65);
  --paper: #f7ecd0; --ink: #4a2a12; --ink-soft: #7a5a3a; --accent: #b4491f; --ray1: #fff1c8; --ray2: #ffe0a0; --display: "Lobster Two", cursive; --body: "Libre Baskerville", Georgia, serif; --t1: 10.4; --t2: 8.6; --t3: 7; color: #ffe9c8; }
.d-corn .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #2b1b4a 0, #8a3a5a 30%, #e8742c 60%, #f3b24a 78%, #f7cf7a 100%); } .d-corn .sun { position: absolute; left: 50%; top: 56%; width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border-radius: 50%; background: radial-gradient(circle, #fff6c8 0, #ffd36a 38%, rgba(255, 170, 60, .35) 62%, transparent 72%); translate: calc((var(--mx, 50vw) - 50vw) * .03) calc((var(--my, 50vh) - 50vh) * .02); }
/* The farm. The sun sets behind dark hills over a pasture; a pumpkin patch and a taller scarecrow stand on the left, with two crows that fly across the top, swoop down and land on its arms. In front of the envelope (and in front of the card once it is out) a little brown barn and a yard of animals walk about slowly, and a farm fence runs along the bottom of the screen end to end. When the card opens, the animals step down to stand just behind the fence. Everything is placed from the envelope's own size (--e3 repeats the scene's envelope width). */
body.d-corn { --e3: min(88vw, 470px, calc(100svh * .72 - 28px)); --hz: 58svh; --fh: calc(var(--e3) * .12); --gy: calc(50svh + var(--e3) * .345); --gy2: calc(100svh - var(--fh) * .5 - 1svh); --drop: max(0px, calc(var(--gy2) - var(--gy)));
  --sw: calc(var(--pu) * 1.35); --kw: calc(var(--pu) * .75); --kh: calc(var(--kw) * .75); --py: calc(100svh - var(--fh) - 4svh - var(--sw) * 1.32); }
.d-corn .hills { position: absolute; left: 0; right: 0; top: calc(var(--hz) - 9svh); height: 10svh; background: radial-gradient(ellipse 60% 100% at 18% 100%, #3a2430 0 98%, transparent 100%), radial-gradient(ellipse 70% 90% at 70% 100%, #4a2c34 0 98%, transparent 100%); }
.d-corn .ground { position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0; background: radial-gradient(ellipse 60% 30% at 50% 0, rgba(255, 190, 80, .4), transparent 70%), linear-gradient(180deg, #8a7a2c 0%, #6a6a26 22%, #4a4e1e 60%, #2f3414 100%); }
.d-corn .p-patch { left: -1%; bottom: calc(var(--fh) + 1svh); width: min(40vw, calc(var(--e3) * .9)); }
.d-corn .p-scarecrow { left: 5%; bottom: calc(var(--fh) + 4svh); width: var(--sw); }
.d-corn.won .p-scarecrow svg { animation: sc-float 1.4s ease-in-out infinite; }
/* Two crows. Each one crosses the top of the screen, turns round, crosses back, then swoops down and lands on one of the scarecrow's arms, sits there a while and flies off again (--bx and --by are the crow's perch, the flight is worked out from them; the wings flap while it flies and fold while it sits). */
.d-corn .crow { position: absolute; z-index: 1; width: var(--kw); padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.d-corn .ca { --cl: 30s; --cd: -2s; --bx: calc(5vw + var(--sw) * .09 - var(--kw) / 2); --by: calc(var(--py) - var(--kh)); left: var(--bx); top: var(--by); animation: cr-a var(--cl) linear var(--cd) infinite; }
.d-corn .cb { --cl: 34s; --cd: -10s; --bx: calc(5vw + var(--sw) * .91 - var(--kw) / 2); --by: calc(var(--py) - var(--kh)); left: var(--bx); top: var(--by); animation: cr-b var(--cl) linear var(--cd) infinite; }
.d-corn .crow svg { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; animation: cr-face-a var(--cl) linear var(--cd) infinite; } .d-corn .cb svg { animation-name: cr-face-b; }
.d-corn .crow .w-fold { animation: cr-fold-show var(--cl) linear var(--cd) infinite; }
.d-corn .crow .w-fly { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: cr-flap .16s ease-in-out infinite alternate, cr-fly-show var(--cl) linear var(--cd) infinite; }
@keyframes cr-flap { from { transform: rotate(-20deg) scaleY(1); } to { transform: rotate(18deg) scaleY(.8); } }
@keyframes cr-fly-show { 0%, 59% { opacity: 1; } 60%, 85% { opacity: 0; } 86%, 100% { opacity: 1; } } @keyframes cr-fold-show { 0%, 59% { opacity: 0; } 60%, 85% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes cr-face-a { 0%, 27% { transform: scaleX(1); } 28%, 52% { transform: scaleX(-1); } 53%, 100% { transform: scaleX(1); } } @keyframes cr-face-b { 0%, 27% { transform: scaleX(-1); } 28%, 52% { transform: scaleX(1); } 53%, 100% { transform: scaleX(-1); } }
@keyframes cr-a {
  0% { transform: translate(calc(-14vw - var(--bx)), calc(12svh - var(--by))) rotate(4deg); }
  14% { transform: translate(calc(50vw - var(--bx)), calc(6svh - var(--by))) rotate(-3deg); }
  27% { transform: translate(calc(108vw - var(--bx)), calc(12svh - var(--by))) rotate(3deg); }
  28% { transform: translate(calc(108vw - var(--bx)), calc(17svh - var(--by))) rotate(0deg); }
  42% { transform: translate(calc(46vw - var(--bx)), calc(9svh - var(--by))) rotate(3deg); }
  52% { transform: translate(calc(-14vw - var(--bx)), calc(14svh - var(--by))) rotate(-2deg); }
  53% { transform: translate(calc(-14vw - var(--bx)), calc(24svh - var(--by))) rotate(0deg); }
  58% { transform: translate(calc(2vw - var(--bx)), calc(55svh - var(--by))) rotate(30deg); }
  60% { transform: translate(0, 0) rotate(-18deg); }
  62%, 84% { transform: translate(0, 0) rotate(0deg); }
  90%, 100% { transform: translate(calc(60vw - var(--bx)), calc(-14svh - var(--by))) rotate(-20deg); }
}
@keyframes cr-b {
  0% { transform: translate(calc(114vw - var(--bx)), calc(10svh - var(--by))) rotate(-4deg); }
  14% { transform: translate(calc(50vw - var(--bx)), calc(7svh - var(--by))) rotate(3deg); }
  27% { transform: translate(calc(-14vw - var(--bx)), calc(13svh - var(--by))) rotate(-3deg); }
  28% { transform: translate(calc(-14vw - var(--bx)), calc(18svh - var(--by))) rotate(0deg); }
  42% { transform: translate(calc(54vw - var(--bx)), calc(9svh - var(--by))) rotate(-3deg); }
  52% { transform: translate(calc(114vw - var(--bx)), calc(14svh - var(--by))) rotate(2deg); }
  53% { transform: translate(calc(114vw - var(--bx)), calc(24svh - var(--by))) rotate(0deg); }
  58% { transform: translate(calc(26vw - var(--bx)), calc(52svh - var(--by))) rotate(-30deg); }
  60% { transform: translate(0, 0) rotate(18deg); }
  62%, 84% { transform: translate(0, 0) rotate(0deg); }
  90%, 100% { transform: translate(calc(-10vw - var(--bx)), calc(-14svh - var(--by))) rotate(20deg); }
}
/* The dashed frame belongs to the envelope's front only while it is closed; once the flap lifts, its top edge is dropped from the front and the copy in the back of the envelope shows behind the card, so the card comes OUT of the envelope instead of sliding up behind a dashed line */
.d-corn .ev-front .bl-stitch { clip-path: polygon(0 0, 8% 0, 8% 0, 92% 0, 92% 0, 100% 0, 100% 100%, 0 100%); }
.d-corn .go .ev-front .bl-stitch { animation: co-notch 1ms .4s forwards; }
@keyframes co-notch { to { clip-path: polygon(0 0, 8% 0, 8% 9%, 92% 9%, 92% 0, 100% 0, 100% 100%, 0 100%); } }
/* In front of the envelope: a little brown barn and a yard of animals walking slowly across (the back row is higher up and smaller, the ones walking left are flipped), with a farm fence along the bottom of the screen */
.d-corn .fm-fore { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; transition: z-index 0s linear 1.4s; } .d-corn .pop .fm-fore { z-index: 6; }
.d-corn .fm-lane { position: absolute; left: 0; right: 0; top: var(--gy); height: 0; transition: translate 1.3s cubic-bezier(.5, 0, .25, 1) .45s; } .d-corn .pop .fm-lane { translate: 0 var(--drop); }
.d-corn .fm-fence { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fh); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56'%3E%3Crect y='12' width='64' height='9' fill='%23a06a36'/%3E%3Crect y='12' width='64' height='3' fill='%23c08a52'/%3E%3Crect y='31' width='64' height='9' fill='%23935f30'/%3E%3Crect y='31' width='64' height='3' fill='%23b87e48'/%3E%3Cpath d='M27 54V10L32 4L37 10V54Z' fill='%237a4a22'/%3E%3Cpath d='M32 4L37 10V54H32Z' fill='%235a3416'/%3E%3Ccircle cx='32' cy='16.5' r='1.3' fill='%232a160a'/%3E%3Ccircle cx='32' cy='35.5' r='1.3' fill='%232a160a'/%3E%3Cpath d='M6 54l2-8 3 8M50 54l1-6 3 6' stroke='%235f7a2a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0 / auto 100%; filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, .3)); }
/* The barn stands on the pasture behind the envelope, four times the size it was (it used to be a small barn in front, smaller than the cow): about as wide as the envelope and a little taller than it, so the roof and the silo show above it. On a phone it is as wide as the screen. */
.d-corn .p-barn { right: 1vw; bottom: calc(100svh - var(--hz) - 3svh); width: min(calc(var(--e3) * 1.08), 96vw); }
.d-corn .fm-a { position: absolute; left: 0; bottom: calc(var(--e3) * var(--by)); width: calc(var(--e3) * var(--s)); animation: fm-go var(--d) linear var(--o) infinite; } .d-corn .fm-a.bl { animation-direction: reverse; } @keyframes fm-go { from { translate: -22vw 0; } to { translate: 105vw 0; } }
.d-corn .fm-tap { display: block; width: 100%; padding: 0; border: 0; background: none; pointer-events: none; -webkit-tap-highlight-color: transparent; } .d-corn .done .fm-tap { pointer-events: auto; cursor: pointer; }
.d-corn .fm-svg { display: block; width: 100%; height: auto; overflow: visible; } .d-corn .fm-a.bl .fm-svg { transform: scaleX(-1); }
.d-corn .fa-l1, .d-corn .fa-l2, .d-corn .lt-l1, .d-corn .lt-l2 { transform-box: fill-box; transform-origin: 50% 0; animation: fa-step var(--stp, .9s) ease-in-out infinite alternate; } .d-corn .fa-l2, .d-corn .lt-l2 { animation-direction: alternate-reverse; } @keyframes fa-step { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.d-corn .fa-body, .d-corn .lt-body { animation: lt-bob .6s ease-in-out infinite alternate; }
.d-corn .fa-head, .d-corn .lt-head { transform-box: fill-box; transform-origin: 30% 100%; animation: lt-peck 1.4s ease-in-out infinite alternate; } .d-corn.scratching .fa-head, .d-corn.scratching .lt-head { animation-duration: .4s; }
.d-corn.won .fa-hop, .d-corn.won .lt-hop, .d-corn .fm-tap.hit .fa-hop, .d-corn .fm-tap.hit .lt-hop { animation: lt-hop .6s ease-out infinite; } .d-corn .fm-tap.hit .fa-hop, .d-corn .fm-tap.hit .lt-hop { animation-iteration-count: 2; }
.d-corn.lost .fa-head, .d-corn.lost .lt-head { animation: none; transform: rotate(14deg) translateY(3px); }
.d-corn .tap-hint, .d-corn .quiet { color: #ffe9c8; font-family: var(--body); text-shadow: 0 1px 6px rgba(40, 10, 10, .8); } .d-corn .bl-stitch { position: absolute; z-index: 2; inset: 3%; border: 2px dashed rgba(90, 56, 22, .55); pointer-events: none; }
.d-corn .seal { background: radial-gradient(circle at 35% 30%, #a8743a, #7a4a22 60%, #4a2a10); box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 0 0 calc(var(--ew) * .01) rgba(255, 230, 170, .35); } .d-corn .seal svg { width: 70%; height: 70%; }
.d-corn .card { background: #f7ecd0; border-radius: 3px; color: var(--ink); background-image: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(150, 100, 40, .25)); box-shadow: 0 0 0 calc(var(--u) * 1) #7a4a22, 0 0 0 calc(var(--u) * 1.5) #f7ecd0, 0 0 0 calc(var(--u) * 2.5) rgba(0, 0, 0, .4), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-corn .corn { position: absolute; z-index: -1; right: calc(var(--u) * -6); bottom: calc(var(--u) * -3); width: calc(var(--u) * 42); opacity: .3; rotate: -8deg; pointer-events: none; }
.d-corn .al-head { padding: calc(var(--u) * .8) calc(var(--u) * 4); border-top: 3px double #7a4a22; border-bottom: 3px double #7a4a22; font: 700 calc(var(--u) * 2.7) / 1.2 var(--body); letter-spacing: .3em; text-transform: uppercase; color: #5a2e12; }
.d-corn .title { font-family: var(--display); font-weight: 700; color: #8a3b14; } .d-corn .al-fc { max-width: 34ch; font: italic 400 calc(var(--u) * 3) / 1.4 var(--body); color: var(--ink); } .d-corn .al-fc b { font-style: normal; color: #b4491f; }
.d-corn .al-list { width: 100%; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * .6) calc(var(--u) * 3); text-align: left; font: 400 calc(var(--u) * 3.5) / 1.25 var(--body); } .d-corn .al-list dt { align-self: center; font-weight: 700; font-size: calc(var(--u) * 2.7); letter-spacing: .2em; text-transform: uppercase; color: #b4491f; } .d-corn .al-list dd { margin: 0; }
.d-corn .note { font: italic 400 calc(var(--u) * 3.2) / 1.35 var(--body); color: var(--ink-soft); } .d-corn .al-sign { font: 400 calc(var(--u) * 4.6) / 1.2 var(--display); color: var(--ink); }
.d-corn .scratch { box-shadow: 0 0 0 calc(var(--u) * 1) #7a4a22, 0 0 0 calc(var(--u) * 1.6) #f7ecd0, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(90, 50, 10, .4); }
.d-corn .prize { background: radial-gradient(circle, #fff8e4, #f3dca0); color: var(--ink); } .d-corn .p-label { font-family: var(--body); color: #8a5a22; } .d-corn .p-text { font-family: var(--display); font-weight: 700; color: #8a3b14; }
.d-corn .scratch-hint { font: italic 400 calc(var(--u) * 3.2) / 1.25 var(--body); letter-spacing: .02em; text-transform: none; color: #8a3b14; }

/* ====================================================== Christmas Morning: a gift tag, in a living room ====================================================== */
body.d-xmorn { --bg: #1d0f0a; --env-back: #7a1414; --env-l: #d63a3a; --env-r: #cf3232; --env-b: #e04848; --flap: #f7f3ec; --flap-in: #8b1a1a; --edge: rgba(217, 178, 74, .8);
  --paper: #fffdf8; --ink: #7a1414; --ink-soft: #5c6b5e; --accent: #c62828; --ray1: #fff; --ray2: #ffe3e3; --display: "Mountains of Christmas", cursive; --body: "Baloo 2", system-ui, sans-serif; --t1: 10; --t2: 8.2; --t3: 6.8; color: #ffe9d6; }
/* The room. A brick chimney breast stands behind the card, the mantel runs just under it, the fire burns below, a big tree stands on the left and a big window shows the snow on the right. Everything is placed from the card's own size (--cw2 repeats the scene's card width), so the room lines up with the card on any screen. */
body.d-xmorn { --ew2: min(88vw, 470px, calc(100svh * .72 - 28px)); --cw2: calc(var(--ew2) * 1.04); --bot: calc(50svh + var(--cw2) * .65); --fl: clamp(24px, 4svh, 46px); --sh: clamp(14px, 2.4svh, 24px);
  --bw: min(calc(var(--cw2) * 1.38), 74vw); --sw: min(calc(var(--cw2) * 1.72), 100vw); --fbw: min(calc(var(--bw) * .66), 86vw); --fh: calc(100svh - var(--bot) - var(--sh) - var(--fl)); --fw: max(130px, min(calc(var(--fh) * 2.1), calc(var(--fbw) * .92)));
  --tw: min(calc(var(--pu) * 4), 30vw); --tl: calc(50% - var(--bw) / 2 - var(--tw) * .82); --ww: min(calc(var(--pu) * 3.4), 26vw); --wl: calc(50% + var(--bw) / 2 + (100vw - var(--bw)) / 4 - var(--ww) / 2); --wt: 8svh; }
.d-xmorn .wall { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 55% at 50% 100%, rgba(255, 150, 60, .2), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 26px), linear-gradient(180deg, #19242f, #2b3b4a 60%, #223241); }
.d-xmorn .wall::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(10px, 2.2svh, 22px); background: linear-gradient(180deg, #ece2cc, #cbbd9f 70%, #8a7d62); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.d-xmorn .wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--fl); height: 21svh; border-top: 4px solid #d8cdb6; background: linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px) 0 0 / calc(var(--pu) * 2.4) 100%, linear-gradient(180deg, #16212b, #0f1920); }
.d-xmorn .floor { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fl); border-top: 3px solid #d8cdb6; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px calc(var(--pu) * 1.6)), linear-gradient(180deg, #7a4e2c, #4c2d18); box-shadow: inset 0 5px 7px rgba(0, 0, 0, .4); }
.d-xmorn .chimney { position: absolute; top: 0; bottom: var(--fl); left: calc(50% - var(--bw) / 2); width: var(--bw); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='36'%3E%3Crect width='44' height='36' fill='%237f3524'/%3E%3Crect x='3' y='3' width='18' height='14' fill='%23a04a30' opacity='.45'/%3E%3Crect x='25' y='3' width='17' height='13' fill='%23b05a38' opacity='.3'/%3E%3Crect x='24' y='21' width='18' height='14' fill='%23652615' opacity='.5'/%3E%3Cpath d='M0 1H44M0 19H44M0 37H44' stroke='%232a120b' stroke-width='2'/%3E%3Cpath d='M1 1V19M23 19V37' stroke='%232a120b' stroke-width='2'/%3E%3C/svg%3E") 0 0 / calc(var(--pu) * .57) calc(var(--pu) * .466), #7f3524; box-shadow: inset 28px 0 40px -18px rgba(0, 0, 0, .62), inset -28px 0 40px -18px rgba(0, 0, 0, .62), 0 0 44px rgba(0, 0, 0, .55); }
.d-xmorn .chimney::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 38% at 50% 100%, rgba(255, 150, 50, .5), transparent 72%); animation: xm-breathe 3s ease-in-out infinite alternate; } @keyframes xm-breathe { from { opacity: .65; } to { opacity: 1; } }
.d-xmorn .mantle { position: absolute; left: calc(50% - var(--sw) / 2); width: var(--sw); top: calc(var(--bot) - 6px); height: calc(var(--sh) + 6px); border-radius: 3px; background: linear-gradient(180deg, #c18d5e, #8c5b34 45%, #5a3519); box-shadow: 0 10px 16px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .28); }
.d-xmorn .mantle::after { content: ""; position: absolute; left: 3%; right: 3%; top: 100%; height: calc(var(--sh) * .55); background: repeating-linear-gradient(90deg, #6d4325 0 calc(var(--pu) * .1), transparent calc(var(--pu) * .1) calc(var(--pu) * .17)); box-shadow: 0 -2px 0 #4a2a14; }
.d-xmorn .firebox { position: absolute; left: calc(50% - var(--fbw) / 2); width: var(--fbw); top: calc(var(--bot) + var(--sh)); bottom: var(--fl); border: calc(var(--pu) * .13) solid #4a4338; border-bottom: 0; border-radius: 8px 8px 0 0; background: radial-gradient(ellipse 80% 75% at 50% 100%, #7a2a0a, #2b0f05 62%, #0d0402); box-shadow: inset 0 12px 22px rgba(0, 0, 0, .8), 0 0 34px rgba(255, 140, 50, .3); }
.d-xmorn .garland { position: absolute; top: calc(var(--bot) + var(--sh) - 4px); width: calc((var(--sw) - var(--fbw)) / 2); height: calc(var(--sh) * 1.6); background: radial-gradient(ellipse 54% 96% at 50% 0, #2a8a4e 0 62%, #0d4a28 63% 96%, transparent 100%) 0 0 / 50% 100% repeat-x; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); pointer-events: none; }
.d-xmorn .gl { left: calc(50% - var(--sw) / 2); } .d-xmorn .gr { left: calc(50% + var(--fbw) / 2); }
.d-xmorn .garland::before, .d-xmorn .garland::after { content: ""; position: absolute; inset: 0; animation: xm-tw 1.7s ease-in-out infinite; } @keyframes xm-tw { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.d-xmorn .garland::before { background: radial-gradient(circle, #ffd27a 0 2px, transparent 3.5px) calc(var(--pu) * .16) 52% / calc(var(--pu) * .5) 36% repeat-x; } .d-xmorn .garland::after { background: radial-gradient(circle, #ff6b6b 0 2px, transparent 3.5px) calc(var(--pu) * .4) 38% / calc(var(--pu) * .5) 30% repeat-x; animation-delay: -.8s; }
.d-xmorn .strand { position: absolute; left: 0; right: 0; top: clamp(10px, 2.2svh, 22px); height: 18px; pointer-events: none; animation: xm-tw 2.2s ease-in-out infinite;
  background: linear-gradient(transparent 6px, #0b0b0b 6px 7px, transparent 7px), radial-gradient(circle, #ffd27a 0 3px, transparent 5px) 0 8px / calc(var(--pu) * 2.1) 18px repeat-x, radial-gradient(circle, #ff7a7a 0 3px, transparent 5px) calc(var(--pu) * .7) 8px / calc(var(--pu) * 2.1) 18px repeat-x, radial-gradient(circle, #9ad0ff 0 3px, transparent 5px) calc(var(--pu) * 1.4) 8px / calc(var(--pu) * 2.1) 18px repeat-x; }
.d-xmorn .warm { position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse 55% 40% at 50% 100%, rgba(255, 140, 40, .26), transparent 72%); pointer-events: none; animation: xm-breathe 3.2s ease-in-out infinite alternate; } .d-xmorn.won .warm { animation-duration: .6s; }
.d-xmorn .p-fire { left: calc(50% - var(--fw) / 2); bottom: var(--fl); width: var(--fw); } .d-xmorn .p-fire svg { filter: drop-shadow(0 0 16px rgba(255, 150, 40, .75)); } .d-xmorn .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-flick 1s ease-in-out infinite alternate; }
.d-xmorn .p-candle1, .d-xmorn .p-candle2 { bottom: calc(100svh - var(--bot) + 4px); width: calc(var(--pu) * .5); }
.d-xmorn .p-candle1 { left: calc(50% - var(--cw2) / 2 - (var(--sw) - var(--cw2)) / 4 - var(--pu) * .25); } .d-xmorn .p-candle2 { left: calc(50% + var(--cw2) / 2 + (var(--sw) - var(--cw2)) / 4 - var(--pu) * .25); }
.d-xmorn .p-stock1, .d-xmorn .p-stock2 { top: calc(var(--bot) + var(--sh)); width: calc(var(--pu) * .58); transform-origin: 50% 0; }
.d-xmorn .p-stock1 { left: calc(50% - var(--fbw) / 2 - var(--pu) * .5 - var(--pu) * .29); } .d-xmorn .p-stock2 { left: calc(50% + var(--fbw) / 2 + var(--pu) * .5 - var(--pu) * .29); }
.d-xmorn .p-tree { left: var(--tl); bottom: calc(var(--fl) - 4px); width: var(--tw); }
.d-xmorn .p-gift3 { left: calc(var(--tl) + var(--tw) * .12); bottom: calc(var(--fl) - 6px); width: calc(var(--tw) * .17); } .d-xmorn .p-gift1 { left: calc(var(--tl) + var(--tw) * .3); bottom: calc(var(--fl) - 8px); width: calc(var(--tw) * .24); } .d-xmorn .p-gift2 { left: calc(var(--tl) + var(--tw) * .6); bottom: calc(var(--fl) - 6px); width: calc(var(--tw) * .2); }
.d-xmorn .p-window { left: var(--wl); top: var(--wt); width: var(--ww); } .d-xmorn .p-window svg { filter: drop-shadow(0 0 28px rgba(120, 160, 255, .25)); }
.d-xmorn .snowfall { position: absolute; left: 22%; right: 22%; top: 8%; bottom: 18%; overflow: hidden; pointer-events: none; background: radial-gradient(circle, #fff 1.6px, transparent 2.6px) 0 0 / 23px 23px, radial-gradient(circle, rgba(255, 255, 255, .8) 1.1px, transparent 2px) 11px 7px / 17px 17px; animation: xm-snow 7s linear infinite; } @keyframes xm-snow { to { background-position: 0 23px, 11px 24px; } } .d-xmorn.gust .snowfall { animation-duration: 1.1s; }
.d-xmorn .lights circle { animation: sc-tw 1.4s ease-in-out infinite; } .d-xmorn .lights circle:nth-child(2n) { animation-delay: -.5s; } .d-xmorn .lights circle:nth-child(3n) { animation-delay: -.9s; } .d-xmorn.chase .lights circle { animation-duration: .25s; } .d-xmorn.won .p-tree svg { animation: sc-float 1.2s ease-in-out infinite; }
@media (max-width: 700px) { body.d-xmorn { --bw: 50vw; --tw: 38vw; --tl: -5vw; --ww: 25vw; --wl: calc(100vw - var(--ww) - 2vw); --wt: 2.5svh; } .d-xmorn .p-candle1, .d-xmorn .p-candle2 { display: none; } }
.d-xmorn .tap-hint, .d-xmorn .quiet { color: #ffe9d6; font-family: var(--body); }
.d-xmorn .xm-fur { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 15%; background: radial-gradient(circle at 10px 0, #fff 8px, transparent 9px) 0 0 / 22px 100% repeat-x, #f7f3ec; border-radius: 0 0 3px 3px; pointer-events: none; } .d-xmorn .go .xm-fur { animation: em-untie .4s ease-in forwards; }
.d-xmorn .seal { background: none; box-shadow: none; } .d-xmorn .seal svg { width: 130%; height: 130%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.d-xmorn .card { background: #fffdf8; border-radius: 6px; color: var(--ink); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-xmorn .card::before { content: ""; position: absolute; inset: 0; padding: calc(var(--u) * 2.2); border-radius: inherit; background: repeating-linear-gradient(45deg, #c62828 0 calc(var(--u) * 3), #fff calc(var(--u) * 3) calc(var(--u) * 6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.d-xmorn .card-in { padding-top: calc(var(--u) * 11); } .d-xmorn .xm-hole { position: absolute; top: calc(var(--u) * 4.6); left: 50%; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); margin-left: calc(var(--u) * -2.2); border-radius: 50%; background: #1d0f0a; box-shadow: inset 0 0 0 calc(var(--u) * .7) #d9b24a; }
.d-xmorn .gt-names { display: flex; justify-content: space-between; width: 100%; font: 600 calc(var(--u) * 3.6) / 1.1 var(--body); color: var(--ink-soft); } .d-xmorn .gt-names p { margin: 0; } .d-xmorn .gt-names b { font: 700 calc(var(--u) * 5.2) / 1 var(--display); color: #c62828; }
.d-xmorn .title { font-family: var(--display); font-weight: 700; color: #c62828; } .d-xmorn .gt-dont { font: 700 calc(var(--u) * 3.6) / 1.15 var(--body); color: #2e8b57; } .d-xmorn .gt-dont small { display: block; font-size: .82em; font-weight: 400; color: var(--ink-soft); }
.d-xmorn .gt-when { font: 600 calc(var(--u) * 4) / 1.15 var(--body); color: var(--ink); } .d-xmorn .gt-where { font: 400 calc(var(--u) * 3.6) / 1.15 var(--body); color: var(--ink-soft); } .d-xmorn .note { font: 400 calc(var(--u) * 3.3) / 1.25 var(--body); font-style: italic; color: var(--ink-soft); } .d-xmorn .gt-wish { font: 700 calc(var(--u) * 4.6) / 1.15 var(--display); color: #c62828; }
.d-xmorn .scratch { box-shadow: 0 0 0 calc(var(--u) * 1.2) #c62828, 0 0 0 calc(var(--u) * 1.9) #fff, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(120, 20, 20, .4); }
.d-xmorn .prize { background: radial-gradient(circle, #fff, #ffe3e3); color: var(--ink); } .d-xmorn .p-label { font-family: var(--body); font-weight: 600; color: #2e8b57; } .d-xmorn .p-text { font-family: var(--display); font-weight: 700; color: #c62828; }
.d-xmorn .scratch-hint { font: 600 calc(var(--u) * 3.3) / 1.2 var(--body); color: #2e8b57; }

/* ====================================================== Silent Night Wish: a little poem ====================================================== */
body.d-xeve { --bg: #060b1f; --env-back: #0a1430; --env-l: #162a5a; --env-r: #13244f; --env-b: #1b3269; --flap: #1b3269; --flap-in: #0a1430; --edge: rgba(207, 224, 255, .7);
  --paper: #f4f7ff; --ink: #14224a; --ink-soft: #5a6a96; --accent: #3a5aa8; --ray1: #fff; --ray2: #e3ecff; --display: "Great Vibes", cursive; --body: "Cormorant Garamond", Georgia, serif; --t1: 13; --t2: 10.6; --t3: 8.6; color: #cfe0ff; }
.d-xeve .bg { background: linear-gradient(180deg, #050918, #0d1a45 55%, #1b2f6b); } .d-xeve .aurora { position: absolute; inset: -10%; background: linear-gradient(115deg, transparent 30%, rgba(80, 255, 200, .16) 45%, rgba(120, 140, 255, .2) 55%, transparent 70%); filter: blur(26px); animation: xe-aur 14s ease-in-out infinite alternate; } @keyframes xe-aur { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.d-xeve .stars { position: absolute; inset: 0 0 30% 0; background: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 12%, #fff, transparent), radial-gradient(1px 1px at 52% 28%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 16%, #fff, transparent), radial-gradient(1px 1px at 88% 30%, #fff, transparent), radial-gradient(1px 1px at 20% 44%, #fff, transparent), radial-gradient(1.5px 1.5px at 62% 48%, #fff, transparent), radial-gradient(1px 1px at 92% 52%, #fff, transparent); animation: sc-tw 4s ease-in-out infinite; }
.d-xeve .village { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: linear-gradient(#0a1228, #060b1f); clip-path: polygon(0 100%, 0 62%, 8% 62%, 12% 40%, 16% 62%, 24% 62%, 24% 46%, 34% 46%, 34% 62%, 42% 62%, 46% 34%, 50% 62%, 60% 62%, 60% 50%, 70% 50%, 70% 62%, 78% 62%, 82% 42%, 86% 62%, 100% 62%, 100% 100%); }
.d-xeve .p-moon { right: 8%; top: 4%; width: calc(var(--pu) * 1.1); } .d-xeve .p-star1 { left: 12%; top: 7%; width: calc(var(--pu) * .3); } .d-xeve .p-star2 { left: 40%; top: 4%; width: calc(var(--pu) * .24); } .d-xeve .p-star3 { right: 30%; top: 20%; width: calc(var(--pu) * .26); }
.d-xeve .p-star1 svg, .d-xeve .p-star2 svg, .d-xeve .p-star3 svg { animation: sc-tw 3s ease-in-out infinite; } .d-xeve .p-star2 svg { animation-delay: -1s; } .d-xeve .p-star3 svg { animation-delay: -2s; }
.d-xeve .p-win1 { left: 10%; bottom: 2%; width: calc(var(--pu) * .38); } .d-xeve .p-win2 { left: 46%; bottom: 3%; width: calc(var(--pu) * .38); } .d-xeve .p-win3 { right: 12%; bottom: 2%; width: calc(var(--pu) * .38); }
.d-xeve .pane { fill: #26356a; transition: fill .3s; } .d-xeve .prop.on .pane { fill: #ffd27a; filter: drop-shadow(0 0 10px #ffd27a); } .d-xeve.won .pane { fill: #ffd27a; }
.d-xeve .sleigh { position: absolute; left: -220px; top: 14%; width: 170px; opacity: 0; pointer-events: none; } .d-xeve.fly .sleigh { animation: xe-fly 5s linear forwards; } @keyframes xe-fly { 0% { opacity: 1; transform: translate(0, 40px) rotate(8deg); } 100% { opacity: 1; transform: translate(calc(100vw + 440px), -90px) rotate(-6deg); } }
.d-xeve .tap-hint, .d-xeve .quiet { color: #cfe0ff; font-family: var(--body); letter-spacing: .3em; } .d-xeve .xe-stars { position: absolute; z-index: 2; inset: 0; background: radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 62% 26%, #fff, transparent), radial-gradient(1.5px 1.5px at 84% 62%, #fff, transparent), radial-gradient(1px 1px at 48% 84%, #fff, transparent); pointer-events: none; animation: sc-tw 3s ease-in-out infinite; } .d-xeve .go .xe-stars { animation: em-untie .4s ease-in forwards; }
.d-xeve .seal { background: radial-gradient(circle at 35% 30%, #2a3f7a, #14224a 60%, #0a1430); box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 0 0 calc(var(--ew) * .01) rgba(207, 224, 255, .5); } .d-xeve .seal svg { width: 72%; height: 72%; }
.d-xeve .card { background: linear-gradient(180deg, #f8faff, #e9efff); border-radius: 3px; color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * .9) #b9c3d9, 0 0 0 calc(var(--u) * 1.3) #f4f7ff, 0 0 0 calc(var(--u) * 2.5) rgba(20, 34, 74, .55), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-xeve .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.8); border: 1px solid rgba(90, 106, 150, .45); pointer-events: none; } .d-xeve .po-star { font-size: calc(var(--u) * 5); line-height: 1; color: #b9c3d9; }
.d-xeve .title { font-family: var(--display); font-weight: 400; color: #14224a; } .d-xeve .po-l { max-width: 30ch; font: italic 500 calc(var(--u) * 4) / 1.35 var(--body); color: #3a4a7a; }
.d-xeve .po-when { font: 600 calc(var(--u) * 4.4) / 1.15 var(--body); letter-spacing: .06em; color: var(--ink); } .d-xeve .po-where { font: italic 500 calc(var(--u) * 4) / 1.15 var(--body); color: var(--ink-soft); } .d-xeve .note { font: italic 500 calc(var(--u) * 3.5) / 1.3 var(--body); color: var(--ink-soft); } .d-xeve .po-sign { font: 400 calc(var(--u) * 6) / 1.1 var(--display); color: #14224a; }
.d-xeve .xe-sp { position: absolute; z-index: 2; width: calc(var(--u) * 4); height: calc(var(--u) * 4); background: #b9c3d9; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; } .d-xeve .xe-sp.a { left: 8%; top: 7%; } .d-xeve .xe-sp.b { right: 9%; top: 11%; } .d-xeve .xe-sp.c { left: 10%; bottom: 7%; }
.d-xeve.opened .xe-sp { animation: sc-tw 3.2s ease-in-out infinite; } .d-xeve.opened .xe-sp.b { animation-delay: -1s; } .d-xeve.opened .xe-sp.c { animation-delay: -2s; }
.d-xeve .scratch { box-shadow: 0 0 0 calc(var(--u) * 1) #b9c3d9, 0 0 0 calc(var(--u) * 1.6) #f4f7ff, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(20, 34, 74, .4); }
.d-xeve .prize { background: radial-gradient(circle, #fff, #dfe9ff); color: var(--ink); } .d-xeve .p-label { font-family: var(--body); font-weight: 600; color: #5a6a96; letter-spacing: .24em; } .d-xeve .p-text { font-family: var(--display); font-weight: 400; color: #14224a; }
.d-xeve .scratch-hint { font: italic 500 calc(var(--u) * 3.4) / 1.25 var(--body); letter-spacing: .04em; text-transform: none; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .d-party .beams, .d-party .dancer, .d-party .p-disco svg, .d-party .p-b1, .d-party .p-b2, .d-party .p-b3, .d-lturkey .lt-walk, .d-lturkey .lt-bird, .d-lturkey .lt-l1, .d-lturkey .lt-l2, .d-lturkey .lt-body, .d-lturkey .lt-head, .d-lturkey .lt-hop, .d-lturkey .cloud, .d-xmorn .flame, .d-xmorn .lights circle, .d-xmorn .chimney::after, .d-xmorn .warm, .d-xmorn .strand, .d-xmorn .garland::before, .d-xmorn .garland::after, .d-xmorn .snowfall, .d-slice .steam, .d-cheers .lightstring, .d-cheers .ch-bulbs, .d-cheers .p-lights svg,
  .d-silver .p-o1 svg, .d-silver .p-o2 svg, .d-silver .p-o3 svg, .d-silver .prop svg, .d-corn .fa-l1, .d-corn .fa-l2, .d-corn .lt-l1, .d-corn .lt-l2, .d-corn .fa-body, .d-corn .lt-body, .d-corn .fa-head, .d-corn .lt-head, .d-corn .fm-a, .d-corn .crow, .d-corn .crow svg, .d-corn .crow .w-fold, .d-corn .crow .w-fly, .d-xeve .aurora, .d-xeve .stars, .d-xeve .prop svg, .d-xeve .xe-stars, .d-silver.opened .gs-sp, .d-xeve.opened .xe-sp { animation: none; }
  .d-xeve.fly .sleigh { animation-duration: .01ms; }
  .d-lturkey .lt-walk { translate: calc(50vw - var(--bw) / 2) 0; } .d-lturkey .lt-lane, .d-lturkey .lt-fore { transition: none; } .d-lturkey .bt { display: none; } .d-corn .fm-a { display: none; } .d-corn .fm-lane, .d-corn .fm-fore { transition: none; }
}