/* Not My Event: the looks of six more scratch-off prize cards, three for Christmas Eve and three for Christmas (pages made by scripts/make-envelope-cards.mjs from scripts/envelope-xmas.mjs). One block per design;
   every card has its OWN structure, words and fonts, and its own room behind the envelope, so none of them looks like another:
     d-ckies   Cookies for Santa      Santa's cookie-inspection report (Caveat Brush)       d-wrap   Last-Minute Wrapping   a typed packing slip (Special Elite)
     d-train   The Midnight Express   a first-class train ticket (Oswald, Courier Prime)    d-sweat  Ugly Sweater Contest   the judge's scorecard (Bangers)
     d-ginger  Gingerbread Lane       a recipe card (Kaushan Script)                         d-carol  The Carolers' Songbook a sheet of carol music (Yeseva One)
   The props stand on the ground band at the bottom of the screen or hang in the band at the top: that is where a phone has room (the card covers the middle). Sizes come from --pu (see card-scratch.css).
   Nothing in an envelope is ever see-through. The base (the opening, the scratch circle, the back layer's reactions) is envelope-card.css and envelope-card.js. */
@keyframes xm2-tw { 0%, 100% { opacity: .4; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes xm2-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
@keyframes xm2-puff { 0% { opacity: 0; transform: translate(0, 6px) scale(.6); } 40% { opacity: .95; } 100% { opacity: 0; transform: translate(10px, -26px) scale(1.5); } }
.d-ckies .seal, .d-wrap .seal, .d-train .seal, .d-sweat .seal, .d-ginger .seal, .d-carol .seal { background: none; box-shadow: none; }
.d-ckies .seal svg, .d-wrap .seal svg, .d-train .seal svg, .d-sweat .seal svg, .d-ginger .seal svg, .d-carol .seal svg { width: 122%; height: 122%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }

/* ====================================================== Cookies for Santa: a kitchen at midnight ====================================================== */
body.d-ckies { --bg: #1b2140; --env-back: #4a2a18; --env-l: #6b3d22; --env-r: #633820; --env-b: #7a4528; --flap: #f1e2c6; --flap-in: #c9a97a; --edge: rgba(255, 235, 200, .6);
  --paper: #fffaf0; --ink: #5a2a14; --ink-soft: #8a6a4a; --accent: #c62828; --ray1: #fff3cc; --ray2: #ffe19a; --display: "Caveat Brush", cursive; --body: "Quicksand", system-ui, sans-serif; --t1: 12; --t2: 9.8; --t3: 8; color: #ffe9d0; }
.d-ckies .bg { background: #1b2140; }
.d-ckies .wall { position: absolute; inset: 0 0 22% 0; background: radial-gradient(ellipse 55% 45% at 50% 28%, rgba(255, 200, 120, .13), transparent 72%), repeating-linear-gradient(90deg, #2a3158 0 46px, #262c52 46px 48px); }
.d-ckies .splash { position: absolute; left: 0; right: 0; bottom: 22%; height: 8%; border-top: 3px solid #b9ae98; background: linear-gradient(#0002 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, #0002 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(#e9e3d6, #cfc6b3); }
.d-ckies .counter { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; border-top: 6px solid #a8743f; background: linear-gradient(#8a5a32, #6b4524 14%, #5a3a1e); box-shadow: inset 0 10px 16px rgba(0, 0, 0, .35); }
.d-ckies .p-window { left: 6%; top: 5%; width: calc(var(--pu) * .95); } .d-ckies .p-clock { right: 7%; top: 5%; width: calc(var(--pu) * .7); }
.d-ckies .p-plate { left: 2%; bottom: calc(22% - 14px); width: calc(var(--pu) * 1.5); } .d-ckies .p-mouse { left: 27%; bottom: calc(22% - 10px); width: calc(var(--pu) * .62); }
.d-ckies .p-milk { right: 21%; bottom: calc(22% - 12px); width: calc(var(--pu) * .5); } .d-ckies .p-carrot { right: 3%; bottom: calc(22% - 10px); width: calc(var(--pu) * 1.1); }
.d-ckies .p-mouse svg { transform-origin: 50% 100%; animation: xm2-peek 6s ease-in-out infinite; } @keyframes xm2-peek { 0%, 70%, 100% { transform: translateY(0); } 80%, 90% { transform: translateY(-3px) rotate(-3deg); } }
.d-ckies .p-plate svg, .d-ckies .p-clock svg { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.d-ckies .tap-hint, .d-ckies .quiet { color: #ffe9d0; font-family: var(--body); }
.d-ckies .ev-from { color: #f6ead2; font-family: var(--display); letter-spacing: .06em; text-transform: none; font-size: calc(var(--ew) * .052); }
.d-ckies .card { background: #fffaf0; border-radius: 4px; color: var(--ink); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-ckies .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.2); border: calc(var(--u) * .6) dashed #c62828; border-radius: 3px; pointer-events: none; opacity: .8; }
.d-ckies .ck-head { font: 700 calc(var(--u) * 3) / 1.1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #c62828; }
.d-ckies .title { font-family: var(--display); font-weight: 400; color: #5a2a14; }
.d-ckies .ck-list { list-style: none; margin: 0; padding: 0; width: 74%; display: grid; gap: calc(var(--u) * .4); } .d-ckies .ck-list li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted #c9a97a; font: 600 calc(var(--u) * 3.2) / 1.25 var(--body); color: var(--ink-soft); } .d-ckies .ck-list b { color: #2f7a4a; font-weight: 700; }
.d-ckies .ck-for { font: 500 calc(var(--u) * 3.2) / 1.2 var(--body); color: var(--ink-soft); } .d-ckies .ck-for b { color: #c62828; }
.d-ckies .ck-when { font: 700 calc(var(--u) * 3.9) / 1.15 var(--body); color: var(--ink); } .d-ckies .ck-where { font: 500 calc(var(--u) * 3.4) / 1.15 var(--body); color: var(--ink-soft); }
.d-ckies .note { font: italic 500 calc(var(--u) * 3.2) / 1.3 var(--body); color: var(--ink-soft); } .d-ckies .ck-sign { max-width: 34ch; font: 500 calc(var(--u) * 3) / 1.3 var(--body); color: var(--ink-soft); } .d-ckies .ck-sign b { color: #c62828; }
.d-ckies .scratch { box-shadow: 0 0 0 calc(var(--u) * 1.1) #c98a4b, 0 0 0 calc(var(--u) * 1.8) #fffaf0, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(90, 42, 20, .35); }
.d-ckies .prize { background: radial-gradient(circle, #fff, #fbe9cf); color: var(--ink); } .d-ckies .p-label { font-family: var(--body); font-weight: 700; color: #c62828; } .d-ckies .p-text { font-family: var(--display); font-weight: 400; color: #5a2a14; }
.d-ckies .scratch-hint { font: 600 calc(var(--u) * 3.1) / 1.2 var(--body); letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }

/* ====================================================== Last-Minute Wrapping: the living-room floor at 11:47 p.m. ====================================================== */
body.d-wrap { --bg: #0b2118; --env-back: #7a1414; --env-l: #d63a3a; --env-r: #cf3232; --env-b: #e04848; --flap: #b32424; --flap-in: #7a1414; --edge: rgba(232, 200, 114, .75);
  --paper: #ffffff; --ink: #1f3d2e; --ink-soft: #5a6a60; --accent: #c62828; --ray1: #fff3cc; --ray2: #ffe19a; --display: "Special Elite", "Courier New", monospace; --body: "Archivo Narrow", system-ui, sans-serif; --t1: 9.6; --t2: 8; --t3: 6.6; color: #ffe9d0; }
.d-wrap .bg { background: #0b2118; }
.d-wrap .wall { position: absolute; inset: 0 0 24% 0; background: radial-gradient(ellipse 60% 50% at 50% 20%, rgba(255, 220, 140, .12), transparent 70%), repeating-linear-gradient(90deg, #14382a 0 38px, #123226 38px 40px); }
.d-wrap .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; border-top: 5px solid #8a6a42; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 86px), linear-gradient(#7a5632, #5a3c20); box-shadow: inset 0 10px 18px rgba(0, 0, 0, .35); }
.d-wrap .scrap { position: absolute; width: 6vmin; height: 3.4vmin; background: #c62828; }
.d-wrap .scrap.a { left: 6%; bottom: 3%; transform: rotate(-18deg); } .d-wrap .scrap.b { left: 40%; bottom: 5%; width: 5vmin; background: #d9b24a; transform: rotate(12deg); } .d-wrap .scrap.c { right: 12%; bottom: 3%; background: #ffffff; transform: rotate(32deg); } .d-wrap .scrap.d { left: 62%; bottom: 2%; width: 7vmin; background: #1f7a4a; transform: rotate(-6deg); }
.d-wrap .p-clock { right: 7%; top: 5%; width: calc(var(--pu) * .7); }
.d-wrap .p-roll { left: 2%; bottom: calc(24% - 14px); width: calc(var(--pu) * .5); } .d-wrap .p-gift { left: 10%; bottom: calc(24% - 18px); width: calc(var(--pu) * 1.1); } .d-wrap .p-tape { left: 27%; bottom: calc(24% - 10px); width: calc(var(--pu) * .8); }
.d-wrap .p-scissors { right: 36%; bottom: calc(24% - 8px); width: calc(var(--pu) * .7); } .d-wrap .p-bows { right: 20%; bottom: calc(24% - 8px); width: calc(var(--pu) * .9); } .d-wrap .p-mug { right: 3%; bottom: calc(24% - 10px); width: calc(var(--pu) * .55); }
.d-wrap .p-gift svg { transform-origin: 50% 100%; animation: xm2-wob 4s ease-in-out infinite; } @keyframes xm2-wob { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.d-wrap .tap-hint, .d-wrap .quiet { color: #ffe9d0; font-family: var(--body); }
.d-wrap .ev-from { color: #fff; font-family: var(--display); letter-spacing: .05em; text-transform: none; bottom: 7%; }
.d-wrap .wr-tape { position: absolute; z-index: 3; left: 43%; width: 14%; top: 60.6%; bottom: 0; background: #e8c872; box-shadow: inset 2px 0 0 #fff3b0, inset -2px 0 0 #c9a24b; pointer-events: none; }
.d-wrap .card { background: #ffffff; border-radius: 2px; color: var(--ink); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-wrap .card::before { content: ""; position: absolute; left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 3); height: calc(var(--u) * .6); background: repeating-linear-gradient(90deg, #1f3d2e 0 calc(var(--u) * 2), transparent 0 calc(var(--u) * 3.4)); pointer-events: none; }
.d-wrap .pk-head { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font: 400 calc(var(--u) * 4.6) / 1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: #c62828; } .d-wrap .pk-head span { font: 700 calc(var(--u) * 2.8) / 1 var(--body); letter-spacing: .06em; color: var(--ink-soft); }
.d-wrap .pk-two, .d-wrap .pk-list { display: grid; gap: calc(var(--u) * .5); width: 100%; margin: 0; } .d-wrap .pk-two { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); text-align: left; }
.d-wrap .pk-two > div, .d-wrap .pk-list > div { display: grid; gap: 0; } .d-wrap .pk-list > div { grid-template-columns: 30% 1fr; align-items: baseline; text-align: left; border-bottom: 1px solid #d5dccf; padding-bottom: calc(var(--u) * .3); }
.d-wrap dt { font: 700 calc(var(--u) * 2.5) / 1.2 var(--body); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); } .d-wrap dd { margin: 0; font: 400 calc(var(--u) * 3.3) / 1.2 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.d-wrap .title { font-family: var(--display); font-weight: 400; color: #1f3d2e; text-transform: uppercase; letter-spacing: .02em; }
.d-wrap .note { font: 400 calc(var(--u) * 3.2) / 1.3 var(--display); color: var(--ink-soft); } .d-wrap .pk-bar { width: 66%; height: calc(var(--u) * 4); margin: 0; background: repeating-linear-gradient(90deg, #1f3d2e 0 2px, transparent 2px 5px, #1f3d2e 5px 6px, transparent 6px 10px, #1f3d2e 10px 13px, transparent 13px 16px); } .d-wrap .pk-foot { font: 700 calc(var(--u) * 2.6) / 1.3 var(--body); letter-spacing: .04em; color: var(--ink-soft); max-width: 40ch; }
.d-wrap .scratch { box-shadow: 0 0 0 calc(var(--u) * 1) #c62828, 0 0 0 calc(var(--u) * 1.7) #fff, 0 0 0 calc(var(--u) * 2.4) #1f7a4a, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(20, 50, 36, .35); }
.d-wrap .prize { background: radial-gradient(circle, #fff, #eaf3ec); color: var(--ink); } .d-wrap .p-label { font-family: var(--body); font-weight: 700; color: #c62828; } .d-wrap .p-text { font-family: var(--display); font-weight: 400; color: #1f3d2e; }
.d-wrap .scratch-hint { font: 400 calc(var(--u) * 3) / 1.2 var(--display); letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }

/* ====================================================== The Midnight Express: a snowy platform at night ====================================================== */
body.d-train { --bg: #070f1a; --env-back: #3a1414; --env-l: #6b2424; --env-r: #612020; --env-b: #7a2c2c; --flap: #4a1818; --flap-in: #2a0c0c; --edge: rgba(217, 178, 74, .75);
  --paper: #f6ecd2; --ink: #2a1a12; --ink-soft: #6a5a48; --accent: #8a2a2a; --ray1: #fff3cc; --ray2: #ffe19a; --display: "Oswald", system-ui, sans-serif; --body: "Courier Prime", "Courier New", monospace; --t1: 10; --t2: 8.4; --t3: 7; color: #dfe6f1; }
.d-train .bg { background: linear-gradient(180deg, #050c18, #0b1a2e 60%, #12283f); }
.d-train .stars { position: absolute; inset: 0 0 45% 0; background: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 28% 12%, #fff, transparent), radial-gradient(1px 1px at 46% 28%, #fff, transparent), radial-gradient(1.5px 1.5px at 66% 16%, #fff, transparent), radial-gradient(1px 1px at 86% 30%, #fff, transparent), radial-gradient(1px 1px at 18% 44%, #fff, transparent), radial-gradient(1.5px 1.5px at 78% 46%, #fff, transparent); animation: xm2-tw 4s ease-in-out infinite; }
.d-train .hills { position: absolute; left: 0; right: 0; bottom: 14%; height: 24%; background: #0c1b2c; clip-path: polygon(0 100%, 0 60%, 12% 30%, 24% 55%, 38% 18%, 52% 52%, 66% 26%, 80% 56%, 92% 34%, 100% 58%, 100% 100%); }
.d-train .station { position: absolute; left: 0; bottom: 12%; width: 24%; height: 22%; background: #14141c; clip-path: polygon(0 100%, 0 34%, 50% 0, 100% 34%, 100% 100%); }
.d-train .station::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#ffd27a, #ffd27a) 14% 58% / 16% 20% no-repeat, linear-gradient(#ffd27a, #ffd27a) 42% 58% / 16% 20% no-repeat, linear-gradient(#ffd27a, #ffd27a) 70% 58% / 16% 20% no-repeat; }
.d-train .track { position: absolute; left: 0; right: 0; bottom: 10%; height: 3.4%; border-top: 3px solid #8a96a6; background: repeating-linear-gradient(90deg, #3a2a1e 0 9px, #1c1410 9px 22px); }
.d-train .platform { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; border-top: 4px solid #f5d142; background: linear-gradient(#dfe6f0, #b9c6d8); }
.d-train .p-sign { left: 4%; top: 6%; width: calc(var(--pu) * 1.7); } .d-train .p-clock { right: 7%; top: 5%; width: calc(var(--pu) * .7); }
.d-train .p-engine { left: 2%; bottom: calc(10% + 4px); width: calc(var(--pu) * 2.6); } .d-train .p-lamp { right: 27%; bottom: calc(10% - 8px); width: calc(var(--pu) * .42); } .d-train .p-cart { right: 3%; bottom: calc(10% - 6px); width: calc(var(--pu) * 1.45); }
.d-train .stm circle { animation: xm2-puff 3.4s ease-out infinite; } .d-train .stm circle:nth-child(2) { animation-delay: -1.1s; } .d-train .stm circle:nth-child(3) { animation-delay: -2.2s; }
.d-train .prop:not(.on) .lg { opacity: .14; } .d-train.fly .p-engine svg, .d-train.gust .p-engine svg { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .5)); }
.d-train .tap-hint, .d-train .quiet { color: #dfe6f1; font-family: var(--body); }
.d-train .ev-from { color: #f6e3a8; font-family: var(--display); letter-spacing: .14em; }
.d-train .card { background: #f6ecd2; border-radius: 6px; color: var(--ink); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-train .card::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--u) * 16); height: 0; border-top: calc(var(--u) * .5) dashed #b6a888; pointer-events: none; }
.d-train .card::after { content: ""; position: absolute; left: calc(var(--u) * -2); top: calc(var(--u) * 14.5); width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: var(--bg); box-shadow: calc(var(--u) * 100) 0 0 var(--bg); }
.d-train .tr-top { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin-top: calc(var(--u) * -1); } .d-train .tr-top b { font: 600 calc(var(--u) * 5) / 1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: #6b2424; } .d-train .tr-top small { font: 700 calc(var(--u) * 2.8) / 1 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); }
.d-train .tr-lab { font: 700 calc(var(--u) * 2.6) / 1 var(--body); text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); margin-top: calc(var(--u) * 2); }
.d-train .title { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #2a1a12; }
.d-train .tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1) calc(var(--u) * 3); width: 100%; margin: 0; text-align: left; } .d-train .tr-grid > div { display: grid; border-bottom: 1px solid #d3c6a6; padding-bottom: calc(var(--u) * .3); }
.d-train dt { font: 700 calc(var(--u) * 2.4) / 1.2 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); } .d-train dd { margin: 0; font: 700 calc(var(--u) * 3.2) / 1.2 var(--body); color: var(--ink); overflow-wrap: anywhere; }
.d-train .note { font: italic 400 calc(var(--u) * 3.1) / 1.3 var(--body); color: var(--ink-soft); } .d-train .tr-foot { font: 700 calc(var(--u) * 2.7) / 1.3 var(--body); letter-spacing: .03em; color: var(--ink-soft); max-width: 40ch; }
.d-train .scratch { box-shadow: 0 0 0 calc(var(--u) * 1) #6b2424, 0 0 0 calc(var(--u) * 1.7) #f6ecd2, 0 0 0 calc(var(--u) * 2.3) #d9b24a, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(40, 20, 10, .4); }
.d-train .prize { background: radial-gradient(circle, #fffdf4, #f0e2bb); color: var(--ink); } .d-train .p-label { font-family: var(--body); font-weight: 700; color: #6b2424; letter-spacing: .2em; } .d-train .p-text { font-family: var(--display); font-weight: 600; color: #2a1a12; text-transform: uppercase; }
.d-train .scratch-hint { font: 700 calc(var(--u) * 3) / 1.2 var(--body); letter-spacing: .06em; text-transform: none; color: var(--ink-soft); }

/* ====================================================== Ugly Sweater Contest: a Christmas party ====================================================== */
body.d-sweat { --bg: #0e2c1d; --env-back: #a82424; --env-l: #d63a3a; --env-r: #cf3232; --env-b: #e04848; --flap: #f6f3ec; --flap-in: #c9c3b6; --edge: rgba(255, 255, 255, .75);
  --paper: #fffdf8; --ink: #a82424; --ink-soft: #5a4a4a; --accent: #1f7a4a; --ray1: #ffffff; --ray2: #ffe3e3; --display: "Bangers", Impact, system-ui, sans-serif; --body: "Fredoka", system-ui, sans-serif; --t1: 12; --t2: 10; --t3: 8; color: #ffe9d6; }
.d-sweat .bg { background: #0e2c1d; }
.d-sweat .wall { position: absolute; inset: 0 0 22% 0; background: radial-gradient(circle at 50% 0, rgba(255, 230, 160, .18), transparent 60%), repeating-linear-gradient(90deg, #1f5a3a 0 36px, #1b5034 36px 72px); }
.d-sweat .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; border-top: 5px solid #8a6a42; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .25) 0 2px, transparent 2px 80px), linear-gradient(#6a4528, #4a2e18); box-shadow: inset 0 10px 18px rgba(0, 0, 0, .35); }
.d-sweat .strand { position: absolute; left: 0; right: 0; top: 1.4%; height: 16px; border-top: 2px solid #1a1a1a; background: radial-gradient(circle, #ff4d4d 0 4px, transparent 5px) 0 50% / 76px 100% repeat-x, radial-gradient(circle, #ffd23f 0 4px, transparent 5px) 19px 50% / 76px 100% repeat-x, radial-gradient(circle, #4dd2ff 0 4px, transparent 5px) 38px 50% / 76px 100% repeat-x, radial-gradient(circle, #6bff8a 0 4px, transparent 5px) 57px 50% / 76px 100% repeat-x; animation: xm2-tw 1.8s ease-in-out infinite; }
.d-sweat .rail { position: absolute; left: 0; right: 0; top: 16%; height: 6px; background: #8a6a3a; box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
.d-sweat { --bw: min(92vw, 560px); }
.d-sweat .p-banner { left: 50%; margin-left: calc(var(--bw) / -2); width: var(--bw); top: 4.5%; }
.d-sweat .p-sw1 { left: 2%; top: calc(16% - 2px); width: calc(var(--pu) * 1.15); } .d-sweat .p-sw2 { left: 21%; top: calc(16% - 2px); width: calc(var(--pu) * 1.15); } .d-sweat .p-sw3 { right: 3%; top: calc(16% - 2px); width: calc(var(--pu) * 1.15); }
.d-sweat .p-trophy { right: 22%; bottom: calc(22% - 14px); width: calc(var(--pu) * .8); } .d-sweat .p-cocoa { right: 4%; bottom: calc(22% - 12px); width: calc(var(--pu) * .6); }
.d-sweat .p-sw1, .d-sweat .p-sw2, .d-sweat .p-sw3 { transform-origin: 50% 0; animation: xm2-bob 5s ease-in-out infinite; } .d-sweat .p-sw2 { animation-delay: -1.7s; } .d-sweat .p-sw3 { animation-delay: -3.1s; }
.d-sweat .prop:not(.on) .bulbs circle { opacity: .35; } .d-sweat .prop.on .bulbs circle, .d-sweat.chase .bulbs circle { animation: xm2-tw .6s ease-in-out infinite; }
.d-sweat .tap-hint, .d-sweat .quiet { color: #ffe9d6; font-family: var(--body); }
.d-sweat .sw-knit { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 24%; border-top: 3px solid #f6f3ec; background: linear-gradient(135deg, #1f7a4a 25%, transparent 25%) -8px 0 / 16px 16px, linear-gradient(225deg, #1f7a4a 25%, transparent 25%) -8px 0 / 16px 16px, linear-gradient(315deg, #1f7a4a 25%, transparent 25%) 0 0 / 16px 16px, linear-gradient(45deg, #1f7a4a 25%, #f6f3ec 25%) 0 0 / 16px 16px; pointer-events: none; }
.d-sweat .ev-from { bottom: 28%; color: #fff; font-family: var(--display); letter-spacing: .1em; text-shadow: 0 2px 3px rgba(80, 10, 10, .6); }
.d-sweat .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-sweat .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.2); border: calc(var(--u) * 1.2) solid #1f7a4a; border-radius: 4px; box-shadow: inset 0 0 0 calc(var(--u) * .8) #fffdf8, inset 0 0 0 calc(var(--u) * 1.4) #c62828; pointer-events: none; }
.d-sweat .sw-head { font: 400 calc(var(--u) * 4.6) / 1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #1f7a4a; }
.d-sweat .title { font-family: var(--display); font-weight: 400; letter-spacing: .02em; color: #c62828; text-shadow: calc(var(--u) * .45) calc(var(--u) * .45) 0 #1f7a4a; }
.d-sweat .sw-list { display: grid; gap: calc(var(--u) * .4); width: 74%; margin: 0; } .d-sweat .sw-list > div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dotted #c9b8b8; } .d-sweat dt { font: 500 calc(var(--u) * 3.2) / 1.25 var(--body); color: var(--ink-soft); } .d-sweat dd { margin: 0; font: 600 calc(var(--u) * 3.2) / 1.25 var(--body); color: #c62828; letter-spacing: .1em; }
.d-sweat .sw-for { font: 500 calc(var(--u) * 3.2) / 1.2 var(--body); color: var(--ink-soft); } .d-sweat .sw-for b { color: #1f7a4a; }
.d-sweat .sw-when { font: 600 calc(var(--u) * 3.9) / 1.15 var(--body); color: var(--ink); } .d-sweat .sw-where { font: 500 calc(var(--u) * 3.4) / 1.15 var(--body); color: var(--ink-soft); }
.d-sweat .note { font: 500 calc(var(--u) * 3.2) / 1.3 var(--body); color: var(--ink-soft); } .d-sweat .sw-sign { max-width: 36ch; font: 500 calc(var(--u) * 3) / 1.3 var(--body); color: var(--ink-soft); }
.d-sweat .scratch { box-shadow: 0 0 0 calc(var(--u) * 1.2) #1f7a4a, 0 0 0 calc(var(--u) * 1.9) #fff, 0 0 0 calc(var(--u) * 2.5) #c62828, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(20, 60, 40, .4); }
.d-sweat .prize { background: radial-gradient(circle, #fff, #e6f6ec); color: var(--ink); } .d-sweat .p-label { font-family: var(--body); font-weight: 600; color: #1f7a4a; } .d-sweat .p-text { font-family: var(--display); font-weight: 400; color: #c62828; letter-spacing: .02em; }
.d-sweat .scratch-hint { font: 500 calc(var(--u) * 3.1) / 1.2 var(--body); letter-spacing: .02em; text-transform: none; color: #1f7a4a; }

/* ====================================================== Gingerbread Lane: a candy village at dusk ====================================================== */
body.d-ginger { --bg: #4a3a78; --env-back: #8a5a2a; --env-l: #b87333; --env-r: #ad6b2f; --env-b: #c98a4b; --flap: #a8631f; --flap-in: #7a4518; --edge: rgba(255, 255, 255, .85);
  --paper: #fff6e6; --ink: #7a4a22; --ink-soft: #8a6a4a; --accent: #d9402b; --ray1: #fff3cc; --ray2: #ffd9a0; --display: "Kaushan Script", cursive; --body: "Patrick Hand", system-ui, cursive; --t1: 11; --t2: 9; --t3: 7.4; color: #fff0dc; }
.d-ginger .bg { background: #4a3a78; }
.d-ginger .sky { position: absolute; inset: 0 0 26% 0; background: linear-gradient(180deg, #5a4a88 0%, #a77aa8 48%, #f2b99a 100%); }
.d-ginger .hill { position: absolute; bottom: 20%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .d-ginger .h1 { left: -10%; width: 70%; height: 14%; background: #f6dfe6; } .d-ginger .h2 { right: -12%; width: 72%; height: 11%; background: #f1d3dd; }
.d-ginger .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: radial-gradient(circle at 14px 0, #fff6f8 12px, transparent 13px) 0 0 / 28px 26px repeat-x, linear-gradient(#fff6f8, #f7dfe6); }
.d-ginger .p-house1 { left: 2%; bottom: calc(24% - 16px); width: calc(var(--pu) * 1.5); } .d-ginger .p-lolli { left: 26%; bottom: calc(24% - 10px); width: calc(var(--pu) * .42); } .d-ginger .p-cane1 { left: 34%; bottom: calc(24% - 10px); width: calc(var(--pu) * .34); }
.d-ginger .p-drops { left: 44%; bottom: calc(24% - 4px); width: calc(var(--pu) * 1); } .d-ginger .p-man { right: 26%; bottom: calc(24% - 12px); width: calc(var(--pu) * .7); } .d-ginger .p-house2 { right: 2%; bottom: calc(24% - 16px); width: calc(var(--pu) * 1.5); }
.d-ginger .p-cane2 { display: none; }
.d-ginger .p-man svg { transform-origin: 50% 100%; animation: xm2-hop 1.6s ease-in-out infinite; } @keyframes xm2-hop { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
.d-ginger .prop:not(.on) .gw { fill: #5a3a1e; } .d-ginger .prop.on .gw { filter: drop-shadow(0 0 8px #ffd27a); } .d-ginger.won .gw { fill: #ffd27a; }
.d-ginger .tap-hint, .d-ginger .quiet { color: #fff0dc; font-family: var(--body); }
.d-ginger .ev-from { color: #fff; font-family: var(--display); letter-spacing: .04em; text-transform: none; font-size: calc(var(--ew) * .05); bottom: 14%; text-shadow: 0 2px 3px rgba(60, 30, 5, .6); }
.d-ginger .gb-icing { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 10%; background: radial-gradient(circle at 9px 0, #fff 8px, transparent 9px) 0 0 / 18px 100% repeat-x; pointer-events: none; }
.d-ginger .card { background: #fff6e6; border-radius: 8px; color: var(--ink); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-ginger .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.2); border: calc(var(--u) * .7) solid #e8c9a0; border-radius: 6px; pointer-events: none; }
.d-ginger .gb-head { font: 400 calc(var(--u) * 3.8) / 1.1 var(--body); color: var(--ink-soft); } .d-ginger .gb-head b { font-weight: 400; color: #d9402b; }
.d-ginger .title { font-family: var(--display); font-weight: 400; color: #8a4a1c; } .d-ginger .gb-sub { font: 400 calc(var(--u) * 3.6) / 1.1 var(--body); letter-spacing: .02em; color: var(--ink-soft); }
.d-ginger .gb-list { margin: 0; padding: 0 0 0 calc(var(--u) * 5); width: 74%; text-align: left; font: 400 calc(var(--u) * 3.6) / 1.35 var(--body); color: var(--ink); } .d-ginger .gb-list li::marker { color: #d9402b; }
.d-ginger .gb-bake { font: 400 calc(var(--u) * 3.8) / 1.2 var(--body); color: var(--ink); } .d-ginger .gb-bake b { color: #2fa866; font-weight: 400; }
.d-ginger .note { font: 400 calc(var(--u) * 3.4) / 1.3 var(--body); color: var(--ink-soft); } .d-ginger .gb-tip { max-width: 34ch; font: 400 calc(var(--u) * 3.1) / 1.3 var(--body); color: var(--ink-soft); } .d-ginger .gb-tip b { color: #d9402b; font-weight: 400; }
.d-ginger .scratch { box-shadow: 0 0 0 calc(var(--u) * 1.2) #d9402b, 0 0 0 calc(var(--u) * 1.9) #fff, 0 0 0 calc(var(--u) * 2.5) #c98a4b, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(100, 50, 10, .35); }
.d-ginger .prize { background: radial-gradient(circle, #fffdf8, #fbe6c8); color: var(--ink); } .d-ginger .p-label { font-family: var(--body); font-weight: 400; color: #d9402b; letter-spacing: .16em; } .d-ginger .p-text { font-family: var(--display); font-weight: 400; color: #8a4a1c; }
.d-ginger .scratch-hint { font: 400 calc(var(--u) * 3.4) / 1.2 var(--body); letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }

/* Gingerbread Lane, fitted: the content must never be taller than the card (a card that is too full pushes its first line onto the border and its last line off the paper) */
.d-ginger .card-in { gap: calc(var(--u) * 1.3); padding-top: calc(var(--u) * 7.5); padding-bottom: calc(var(--u) * 6.5); }
.d-ginger .scratch { width: calc(var(--u) * 31); height: calc(var(--u) * 31); margin: calc(var(--u) * 2) 0; box-shadow: 0 0 0 calc(var(--u) * 1) #d9402b, 0 0 0 calc(var(--u) * 1.6) #fff, 0 0 0 calc(var(--u) * 2) #c98a4b, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(100, 50, 10, .35); }
.d-ginger .t-m .scratch, .d-ginger .t-l .scratch, .d-ginger .n-l .scratch { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.d-ginger .gb-list { font-size: calc(var(--u) * 3.3); line-height: 1.25; } .d-ginger .gb-bake { font-size: calc(var(--u) * 3.5); line-height: 1.15; } .d-ginger .gb-sub { font-size: calc(var(--u) * 3.3); } .d-ginger .gb-head { font-size: calc(var(--u) * 3.5); }

/* ====================================================== The Carolers' Songbook: a snowy street at dusk ====================================================== */
body.d-carol { --bg: #0f0c24; --env-back: #b3202a; --env-l: #f7f3ea; --env-r: #f2ede0; --env-b: #fbf8f0; --flap: #b3202a; --flap-in: #7a1218; --edge: rgba(217, 178, 74, .85);
  --paper: #fffdf8; --ink: #6b1220; --ink-soft: #7a5a5a; --accent: #b8923a; --ray1: #fff3cc; --ray2: #ffe19a; --display: "Yeseva One", Georgia, serif; --body: "Playfair Display", Georgia, serif; --t1: 10.4; --t2: 8.6; --t3: 7.2; color: #e8e4ff; }
.d-carol .bg { background: #0f0c24; }
.d-carol .sky { position: absolute; inset: 0 0 20% 0; background: linear-gradient(180deg, #1c1642 0%, #4a3070 52%, #c9744e 100%); }
.d-carol .houses { position: absolute; left: 0; right: 0; bottom: 14%; height: 16%; background: #150f2e; clip-path: polygon(0 100%, 0 38%, 9% 38%, 15% 8%, 21% 38%, 36% 38%, 36% 26%, 46% 26%, 46% 38%, 54% 38%, 61% 4%, 68% 38%, 80% 38%, 80% 22%, 90% 22%, 90% 38%, 100% 38%, 100% 100%); }
.d-carol .houses::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#ffd27a, #ffd27a) 12% 62% / 4% 22% no-repeat, linear-gradient(#ffd27a, #ffd27a) 40% 60% / 4% 22% no-repeat, linear-gradient(#ffd27a, #ffd27a) 58% 66% / 4% 22% no-repeat, linear-gradient(#ffd27a, #ffd27a) 86% 58% / 4% 22% no-repeat; animation: xm2-tw 3.4s ease-in-out infinite; }
.d-carol .snow { position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: linear-gradient(#f4f7ff, #dce4f6); border-top: 3px solid #fff; }
.d-carol .p-carolers { left: 2%; bottom: calc(15% - 14px); width: calc(var(--pu) * 2.6); } .d-carol .p-snowman { left: 44%; bottom: calc(15% - 12px); width: calc(var(--pu) * .9); } .d-carol .p-mailbox { left: 60%; bottom: calc(15% - 10px); width: calc(var(--pu) * .5); }
.d-carol .p-lamp { right: 22%; bottom: calc(15% - 10px); width: calc(var(--pu) * .4); } .d-carol .p-tree { right: 3%; bottom: calc(15% - 12px); width: calc(var(--pu) * 1.2); }
.d-carol .prop:not(.on) .lg { opacity: .16; } .d-carol .lights circle { animation: xm2-tw 1.6s ease-in-out infinite; } .d-carol .lights circle:nth-child(2n) { animation-delay: -.5s; } .d-carol .lights circle:nth-child(3n) { animation-delay: -1s; }
.d-carol.sing .p-carolers svg { animation: xm2-bob .5s ease-in-out 4; }
.d-carol .tap-hint, .d-carol .quiet { color: #e8e4ff; font-family: var(--body); }
.d-carol .ev-from { color: #6b1220; font-family: var(--display); letter-spacing: .06em; text-transform: none; font-size: calc(var(--ew) * .05); bottom: 6%; }
.d-carol .card { background: #fffdf8; border-radius: 3px; color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * .8) #d9b24a, 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-carol .cl-staff { position: relative; width: 84%; height: calc(var(--u) * 8); display: flex; flex-direction: column; justify-content: space-between; } .d-carol .cl-staff i { display: block; height: 1px; background: #7a5a5a; }
.d-carol .cl-staff span { position: absolute; font: 400 calc(var(--u) * 7) / 1 var(--body); color: #6b1220; } .d-carol .n1 { left: 16%; top: -26%; } .d-carol .n2 { left: 46%; top: 8%; } .d-carol .n3 { left: 76%; top: -18%; }
.d-carol .cl-head { font: italic 500 calc(var(--u) * 3.2) / 1 var(--body); letter-spacing: .1em; color: var(--ink-soft); }
.d-carol .title { font-family: var(--display); font-weight: 400; color: #6b1220; } .d-carol .cl-verse { font: italic 500 calc(var(--u) * 3.6) / 1.3 var(--body); color: var(--ink-soft); }
.d-carol .cl-line { font: 500 calc(var(--u) * 3.6) / 1.25 var(--body); color: var(--ink); } .d-carol .cl-line b { font-style: italic; color: #b8923a; font-weight: 700; }
.d-carol .note { font: italic 500 calc(var(--u) * 3.2) / 1.3 var(--body); color: var(--ink-soft); } .d-carol .cl-sign { max-width: 36ch; font: italic 500 calc(var(--u) * 3.1) / 1.3 var(--body); color: var(--ink-soft); } .d-carol .cl-sign b { color: #6b1220; font-style: normal; }
.d-carol .scratch { box-shadow: 0 0 0 calc(var(--u) * 1) #d9b24a, 0 0 0 calc(var(--u) * 1.6) #fffdf8, 0 0 0 calc(var(--u) * 2.2) #6b1220, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(60, 10, 20, .35); }
.d-carol .prize { background: radial-gradient(circle, #fffefa, #f8ecd2); color: var(--ink); } .d-carol .p-label { font-family: var(--body); font-style: italic; font-weight: 500; color: #b8923a; letter-spacing: .12em; } .d-carol .p-text { font-family: var(--display); font-weight: 400; color: #6b1220; }
.d-carol .scratch-hint { font: italic 500 calc(var(--u) * 3.2) / 1.2 var(--body); letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .d-ckies .p-mouse svg, .d-wrap .p-gift svg, .d-train .stars, .d-train .stm circle, .d-sweat .strand, .d-sweat .p-sw1, .d-sweat .p-sw2, .d-sweat .p-sw3, .d-sweat .bulbs circle, .d-ginger .p-man svg, .d-carol .houses::after, .d-carol .lights circle, .d-carol.sing .p-carolers svg { animation: none; }
}