/* Not My Event: the looks of six quinceañera scratch-off prize cards (pages made by scripts/make-envelope-cards.mjs from scripts/envelope-qscratch.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-qcorona  La Corona            a royal decree (Cinzel Decorative, Cormorant Garamond)     d-qseren  La Serenata          a serenade program (Sancreek, Josefin Sans)
     d-qneon    Neon XV              a VIP all-access pass (Monoton, Chakra Petch)               d-qmarip  Jardín de Mariposas  a specimen label (Italianno, Lora)
     d-qlot     Lotería de Quince    a lotería board of our own cards (Rozha One, Work Sans)     d-qvals   El Vals              a dance card (Pinyon Script, EB Garamond)
   In every room the same two stand together on a little floor of their own, just left of the envelope: her birthday cake on its table, frosted to match (a tap lights its candles), and the
   quinceañera in a gown in the card's colours, right beside the envelope. There is no floor band across the bottom of the screen. They stay put: nothing in these rooms moves with the mouse,
   and nothing drifts in front of the card (the user, 2026-11-08).
   Sizes come from --pu (see card-scratch.css). Nothing in an envelope is ever see-through. The base (the opening, the scratch circle) is envelope-card.css and envelope-card.js. */
@keyframes qs-tw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes qs-twirl { from { transform: scaleX(.92); } to { transform: scaleX(1.05); } }
@keyframes qs-flick { from { transform: scaleY(1); } to { transform: scaleY(.84); } }
@keyframes qs-laser { from { transform: rotate(var(--a0)); } to { transform: rotate(var(--a1)); } }
.d-qcorona .seal, .d-qseren .seal, .d-qneon .seal, .d-qmarip .seal, .d-qlot .seal, .d-qvals .seal { background: none; box-shadow: none; }
.d-qcorona .seal svg, .d-qseren .seal svg, .d-qneon .seal svg, .d-qmarip .seal svg, .d-qlot .seal svg, .d-qvals .seal svg { width: 122%; height: 122%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }

/* ====================================================== The quinceañera and her cake (every room) ====================================================== */
/* The user, 2026-11-08: "we want her next to the card and the cake both close to the card - maybe the left side and remove the bottom frame look and give her a small floor to be
   standing on next to the envelope". So the two stand on a little floor of their own (.qstand; the floor is its ::before, in each card's own floor: --qf-top, --qf-edge, --qf-rim below),
   the cake first and the girl right beside the envelope. Where there is room beside the envelope (a computer, a tablet, a phone turned sideways) the stand is just left of it, with their feet
   level with the envelope's bottom edge; --qew and --qmid repeat the envelope's width and middle from envelope-card.css (those live on .scene, so they cannot be read here). On a phone held
   upright the envelope fills the width, so the stand waits at the bottom left, under the card. */
body:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) { --qew: min(88vw, 470px, 100svh * .72 - 28px); --qmid: 50svh; }
html.nme-edit body:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) { --qew: min(88vw, 470px, 54svh * .72 - 28px); --qmid: 27svh; }
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .qstand { position: absolute; z-index: 1; left: 3%; bottom: 2%; width: calc(var(--pu) * 2.9); height: calc(var(--pu) * 2.1); }
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .qstand::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--pu) * .1); height: calc(var(--pu) * .4); border-radius: 50%; background: var(--qf-top); border: calc(var(--pu) * .035) solid var(--qf-rim); box-shadow: 0 calc(var(--pu) * .1) 0 var(--qf-edge), 0 calc(var(--pu) * .18) calc(var(--pu) * .18) rgba(0, 0, 0, .35); }
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .qstand .p-cake { left: calc(var(--pu) * .12); bottom: calc(var(--pu) * .28); width: calc(var(--pu) * 1.3); }
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .qstand .p-queen { right: calc(var(--pu) * .12); bottom: calc(var(--pu) * .28); width: calc(var(--pu) * 1.15); }
@media (min-aspect-ratio: 5/4) and (min-width: 600px) {
  :is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .qstand { left: auto; bottom: auto; right: calc(50% + var(--qew) / 2 + 1.5vw); top: calc(var(--qmid) + var(--qew) * .33 - var(--pu) * 1.8); }
}
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .p-queen svg, :is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .p-cake svg { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35)); }
/* her skirt sways a little, in place */
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .p-queen .skirt { transform-box: fill-box; transform-origin: 50% 0; animation: qs-twirl 2.4s ease-in-out infinite alternate; }
/* the candles: out until the cake is tapped, then lit and glowing */
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .p-cake :is(.flm, .halo) { opacity: 0; transition: opacity .45s ease; }
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .p-cake .flm { transform-box: fill-box; transform-origin: 50% 100%; }
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .p-cake.on .flm { opacity: 1; animation: qs-flick .45s ease-in-out infinite alternate; }
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .p-cake.on .halo { opacity: .5; }
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .p-cake.on svg { filter: drop-shadow(0 0 12px rgba(255, 210, 120, .8)); }

/* ====================================================== La Corona: a throne room ====================================================== */
body.d-qcorona { --bg: #1a0614; --env-back: #3a0a1e; --env-l: #7a1a3a; --env-r: #6e1634; --env-b: #8c2246; --flap: #5a1230; --flap-in: #3a0a1e; --edge: rgba(240, 201, 90, .7);
  --paper: #fff8ec; --ink: #4a0f24; --ink-soft: #7a5a4a; --accent: #b8862a; --ray1: #fff3cc; --ray2: #ffe19a; --display: "Cinzel Decorative", Georgia, serif; --body: "Cormorant Garamond", Georgia, serif; --t1: 9.4; --t2: 7.8; --t3: 6.4; color: #ffe9d0; }
.d-qcorona .bg { background: #1a0614; }
.d-qcorona .wall { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 50% 30%, #4a1434, transparent 72%), radial-gradient(circle at 50% 50%, #3a0e28 0 22%, transparent 24%) 0 0 / 46px 46px, #2a0a1e; }
.d-qcorona .qstand { --qf-top: #a8183a; --qf-edge: #5a0e22; --qf-rim: #f0c95a; }
.d-qcorona .tap-hint, .d-qcorona .quiet { color: #ffe9d0; font-family: var(--body); font-weight: 700; }
.d-qcorona .ev-from { color: #f0c95a; font-family: var(--body); font-weight: 700; }
.d-qcorona .card { background: #fff8ec; border-radius: 3px; color: var(--ink); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-qcorona .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.2); border: calc(var(--u) * .7) solid #c9a24b; outline: calc(var(--u) * .3) solid #c9a24b; outline-offset: calc(var(--u) * -1.8); border-radius: 2px; pointer-events: none; }
.d-qcorona .card-in { gap: calc(var(--u) * 1.8); }
.d-qcorona .cr-decree { margin: 0; font: 700 calc(var(--u) * 3.4) / 1 var(--display); letter-spacing: .14em; color: #b8862a; text-transform: uppercase; }
.d-qcorona .cr-hear { margin: 0; font: italic 500 calc(var(--u) * 3.6) / 1 var(--body); color: var(--ink-soft); }
.d-qcorona .title { font-family: var(--display); font-weight: 700; color: #7a1a3a; }
.d-qcorona .cr-proc { margin: 0; max-width: 34ch; font: 500 calc(var(--u) * 3.5) / 1.25 var(--body); color: var(--ink); } .d-qcorona .cr-proc b { color: #7a1a3a; font-weight: 700; }
.d-qcorona .cr-when { margin: 0; font: 700 calc(var(--u) * 3.9) / 1.15 var(--body); color: var(--ink); } .d-qcorona .cr-where { margin: 0; font: 500 calc(var(--u) * 3.6) / 1.15 var(--body); color: var(--ink-soft); }
.d-qcorona .note { font: italic 500 calc(var(--u) * 3.4) / 1.3 var(--body); color: var(--ink-soft); }
.d-qcorona .cr-sign { margin: 0; font: 700 calc(var(--u) * 2.9) / 1.3 var(--display); letter-spacing: .04em; color: #b8862a; }
.d-qcorona .scratch { box-shadow: 0 0 0 calc(var(--u) * 1) #f0c95a, 0 0 0 calc(var(--u) * 1.7) #fff8ec, 0 0 0 calc(var(--u) * 2.3) #7a1a3a, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(74, 15, 36, .35); }
.d-qcorona .prize { background: radial-gradient(circle, #fff, #fbeed2); color: var(--ink); } .d-qcorona .p-label { font-family: var(--body); font-weight: 700; color: #b8862a; letter-spacing: .14em; } .d-qcorona .p-text { font-family: var(--display); font-weight: 700; color: #7a1a3a; }
.d-qcorona .scratch-hint { font: italic 600 calc(var(--u) * 3.2) / 1.2 var(--body); letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }

/* ====================================================== La Serenata: a courtyard at night ====================================================== */
body.d-qseren { --bg: #0a0a1e; --env-back: #0a0910; --env-l: #1d1926; --env-r: #18151f; --env-b: #24202e; --flap: #14121a; --flap-in: #0a0910; --edge: rgba(217, 217, 224, .6);
  --paper: #fff6e8; --ink: #1d1926; --ink-soft: #6a5a58; --accent: #b0203a; --ray1: #fff3cc; --ray2: #ffe19a; --display: "Sancreek", Georgia, serif; --body: "Josefin Sans", system-ui, sans-serif; --t1: 9.6; --t2: 8; --t3: 6.6; color: #f1ecf8; }
.d-qseren .bg { background: #0a0a1e; }
.d-qseren .sky { position: absolute; inset: 0; background: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 30% 34%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 26%, #fff, transparent), radial-gradient(1px 1px at 88% 38%, #fff, transparent), radial-gradient(1px 1px at 46% 44%, #fff, transparent), linear-gradient(#0a0a1e, #1a1a3a); animation: qs-tw 5s ease-in-out infinite alternate; }
.d-qseren .qstand { --qf-top: radial-gradient(circle, #7a6a6a 0 38%, #5a4e4e 40%) 0 0 / 18px 12px, #5a4e4e; --qf-edge: #2e2626; --qf-rim: #8a7a7a; }
.d-qseren .tap-hint, .d-qseren .quiet { color: #f1ecf8; font-family: var(--body); }
.d-qseren .ev-from { color: #d9d9e0; font-family: var(--body); font-weight: 600; }
.d-qseren .sr-buttons { position: absolute; z-index: 3; left: 4%; right: 4%; top: 10%; bottom: 12%; pointer-events: none;
  background: radial-gradient(circle, #e8e8f0 0 30%, #9aa0aa 32% 42%, transparent 44%) left top / calc(var(--ew) * .05) calc(var(--ew) * .075) repeat-y, radial-gradient(circle, #e8e8f0 0 30%, #9aa0aa 32% 42%, transparent 44%) right top / calc(var(--ew) * .05) calc(var(--ew) * .075) repeat-y; }
.d-qseren .card { background: #fff6e8; border-radius: 4px; color: var(--ink); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .6); }
.d-qseren .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 3.4); background: #1d1926; box-shadow: 0 calc(var(--u) * 1.2) 0 #b0203a; pointer-events: none; }
.d-qseren .card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 3.4); background: #1d1926; box-shadow: 0 calc(var(--u) * -1.2) 0 #b0203a; pointer-events: none; }
.d-qseren .card-in { gap: calc(var(--u) * 1.8); }
.d-qseren .sr-top { margin: 0; font: 400 calc(var(--u) * 7) / 1 var(--display); color: #b0203a; }
.d-qseren .sr-for { margin: 0; font: 600 calc(var(--u) * 3.3) / 1.2 var(--body); letter-spacing: .04em; color: var(--ink-soft); } .d-qseren .sr-for b { color: #b0203a; }
.d-qseren .title { font-family: var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #1d1926; }
.d-qseren .sr-songs { list-style: none; counter-reset: s; margin: 0; padding: 0; width: 80%; display: grid; gap: calc(var(--u) * .5); }
.d-qseren .sr-songs li { counter-increment: s; display: flex; align-items: baseline; gap: calc(var(--u) * 1.6); border-bottom: 1px dotted #c9b29a; font: 700 calc(var(--u) * 3.3) / 1.25 var(--body); color: var(--ink); text-align: left; }
.d-qseren .sr-songs li::before { content: counter(s) "."; color: #b0203a; } .d-qseren .sr-songs i { margin-left: auto; font: italic 400 calc(var(--u) * 2.8) / 1.2 var(--body); color: var(--ink-soft); }
.d-qseren .sr-when { margin: 0; font: 700 calc(var(--u) * 3.7) / 1.15 var(--body); color: var(--ink); } .d-qseren .sr-where { margin: 0; font: 400 calc(var(--u) * 3.4) / 1.15 var(--body); color: var(--ink-soft); }
.d-qseren .note { font: 400 calc(var(--u) * 3.2) / 1.3 var(--body); color: var(--ink-soft); } .d-qseren .sr-sign { margin: 0; font: 600 calc(var(--u) * 3) / 1.3 var(--body); color: var(--ink-soft); }
.d-qseren .scratch { width: calc(var(--u) * 32); height: calc(var(--u) * 32); box-shadow: 0 0 0 calc(var(--u) * 1) #1d1926, 0 0 0 calc(var(--u) * 1.6) #fff6e8, 0 0 0 calc(var(--u) * 2.2) #b0203a, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(29, 25, 38, .4); }
.d-qseren.t-m .scratch, .d-qseren.t-l .scratch, .d-qseren.n-l .scratch { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.d-qseren .prize { background: radial-gradient(circle, #fff, #f2ecf4); color: var(--ink); } .d-qseren .p-label { font-family: var(--body); font-weight: 700; color: #b0203a; } .d-qseren .p-text { font-family: var(--display); font-weight: 400; color: #1d1926; }
.d-qseren .scratch-hint { font: 600 calc(var(--u) * 3) / 1.2 var(--body); letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }

/* ====================================================== Neon XV: the club ====================================================== */
body.d-qneon { --bg: #0a0618; --env-back: #2a1a4a; --env-l: #ff5fb8; --env-r: #3fd8f0; --env-b: #a56bf0; --flap: #ffd6f5; --flap-in: #b9a6ff; --edge: rgba(255, 255, 255, .8);
  --paper: #120a24; --ink: #ffffff; --ink-soft: #b9a6ff; --accent: #ff2fa0; --ray1: #ffd6f5; --ray2: #9ae8ff; --display: "Monoton", system-ui, sans-serif; --body: "Chakra Petch", system-ui, sans-serif; --t1: 8.8; --t2: 7.2; --t3: 5.8; color: #f1e8ff; }
.d-qneon .bg { background: #0a0618; }
.d-qneon .club { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 24%, #2a0e44, transparent 72%), repeating-linear-gradient(90deg, #120a24 0 52px, #160c2c 52px 54px); }
.d-qneon .lasers i { position: absolute; top: 0; left: 50%; width: 2px; height: 120vh; transform-origin: 50% 0; animation: qs-laser 4.4s ease-in-out infinite alternate; }
.d-qneon .lasers i:nth-child(1) { background: #ff2fa0; --a0: 18deg; --a1: 48deg; } .d-qneon .lasers i:nth-child(2) { background: #22d3ee; --a0: -18deg; --a1: -48deg; }
.d-qneon .lasers i:nth-child(3) { background: #a56bf0; --a0: 34deg; --a1: 8deg; animation-delay: -2.2s; } .d-qneon .lasers i:nth-child(4) { background: #5fd68a; --a0: -34deg; --a1: -8deg; animation-delay: -2.2s; }
.d-qneon .qstand { --qf-top: conic-gradient(#ff2fa0 25%, #2a1a4a 0 50%, #22d3ee 0 75%, #2a1a4a 0) 0 0 / 22px 22px; --qf-edge: #a0186a; --qf-rim: #22d3ee; }
.d-qneon .tap-hint, .d-qneon .quiet { color: #f1e8ff; font-family: var(--body); }
.d-qneon .ev-from { color: #120a24; font-family: var(--body); font-weight: 700; }
.d-qneon .card { background: #120a24; border-radius: calc(var(--u) * 5); color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * .8) #ff2fa0, 0 0 0 calc(var(--u) * 1.6) #22d3ee, 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .6); }
.d-qneon .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 22); border-radius: calc(var(--u) * 5) calc(var(--u) * 5) 0 0; background: linear-gradient(90deg, #ff5fb8, #a56bf0 50%, #3fd8f0); pointer-events: none; }
.d-qneon .card-in { gap: calc(var(--u) * 1.8); justify-content: flex-start; padding-top: calc(var(--u) * 4); }
.d-qneon .ds-hole { position: relative; flex: none; width: calc(var(--u) * 16); height: calc(var(--u) * 3.4); border-radius: calc(var(--u) * 2); background: #0a0618; box-shadow: inset 0 calc(var(--u) * .5) calc(var(--u) * .8) #000; }
.d-qneon .ds-top { position: relative; margin: 0; font: 700 calc(var(--u) * 3) / 1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: #120a24; }
.d-qneon .ds-vip { position: relative; margin: calc(var(--u) * 1.4) 0 0; font: 700 calc(var(--u) * 6) / 1 var(--body); letter-spacing: .06em; color: #120a24; text-transform: uppercase; } .d-qneon .ds-vip b { color: #ffffff; }
.d-qneon .title { margin-top: calc(var(--u) * 3); font-family: var(--display); font-weight: 400; color: #ff9ad0; letter-spacing: .02em; }
.d-qneon .ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); width: 86%; margin: 0; text-align: left; } .d-qneon .ds-grid > div { display: grid; border-left: calc(var(--u) * .6) solid #22d3ee; padding-left: calc(var(--u) * 1.6); }
.d-qneon dt { font: 700 calc(var(--u) * 2.5) / 1.2 var(--body); text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); } .d-qneon dd { margin: 0; font: 600 calc(var(--u) * 3.3) / 1.2 var(--body); color: #ffffff; overflow-wrap: anywhere; }
.d-qneon .note { font: 500 calc(var(--u) * 3.1) / 1.3 var(--body); color: var(--ink-soft); }
.d-qneon .ds-bar { width: 62%; height: calc(var(--u) * 4.4); margin: 0; background: repeating-linear-gradient(90deg, #ffffff 0 2px, #120a24 2px 5px, #ffffff 5px 6px, #120a24 6px 10px, #ffffff 10px 13px, #120a24 13px 16px); }
.d-qneon .ds-foot { margin: 0; font: 600 calc(var(--u) * 2.6) / 1.3 var(--body); letter-spacing: .04em; color: var(--ink-soft); max-width: 40ch; }
.d-qneon .scratch { box-shadow: 0 0 0 calc(var(--u) * 1) #ff2fa0, 0 0 0 calc(var(--u) * 1.7) #120a24, 0 0 0 calc(var(--u) * 2.3) #22d3ee, 0 0 calc(var(--u) * 6) #ff2fa0; --ring: #22d3ee; }
.d-qneon .prize { background: radial-gradient(circle, #2a1a4a, #120a24); color: #fff; } .d-qneon .p-label { font-family: var(--body); font-weight: 700; color: #22d3ee; letter-spacing: .2em; } .d-qneon .p-text { font-family: var(--body); font-weight: 700; color: #ff9ad0; text-transform: uppercase; }
.d-qneon .scratch-hint { font: 600 calc(var(--u) * 3) / 1.2 var(--body); letter-spacing: .06em; text-transform: none; color: var(--ink-soft); }

/* ====================================================== Jardín de Mariposas: a garden at golden hour ====================================================== */
body.d-qmarip { --bg: #f6c99a; --env-back: #8a72b0; --env-l: #9ab89a; --env-r: #90ae90; --env-b: #a6c4a6; --flap: #8aa88a; --flap-in: #b9a2d8; --edge: rgba(246, 238, 252, .75);
  --paper: #fdf8ee; --ink: #3a2a4a; --ink-soft: #6a5a6a; --accent: #b06a5a; --ray1: #fff3cc; --ray2: #ffe1d6; --display: "Italianno", cursive; --body: "Lora", Georgia, serif; --t1: 15; --t2: 12.4; --t3: 10; color: #3a2a4a; }
.d-qmarip .bg { background: #f6c99a; }
.d-qmarip .gsky { position: absolute; inset: 0; background: radial-gradient(circle at 50% 22%, #fff3c8 0 7%, transparent 7.5%), linear-gradient(#f3a98a, #f6c99a 50%, #fbe2b4); }
.d-qmarip .qstand { --qf-top: repeating-linear-gradient(90deg, #6aa05a 0 14px, #64995a 14px 28px); --qf-edge: #3f7a3f; --qf-rim: #8ac07a; }
.d-qmarip .tap-hint, .d-qmarip .quiet { color: #3a2a4a; font-family: var(--body); }
.d-qmarip .ev-from { color: #2f4a2f; font-family: var(--body); font-style: italic; text-transform: none; }
.d-qmarip .card { background: #fdf8ee; border-radius: 2px; color: var(--ink); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(58, 42, 74, .45); }
.d-qmarip .card::before { content: ""; position: absolute; inset: calc(var(--u) * 3); border: calc(var(--u) * .35) solid #3a2a4a; box-shadow: inset 0 0 0 calc(var(--u) * .8) #fdf8ee, inset 0 0 0 calc(var(--u) * 1.1) #3a2a4a; pointer-events: none; }
.d-qmarip .card-in { gap: calc(var(--u) * 2); }
.d-qmarip .mp-top { margin: 0; font: 600 calc(var(--u) * 2.9) / 1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: #b06a5a; }
.d-qmarip .mp-latin { margin: 0; font: italic 500 calc(var(--u) * 3.6) / 1 var(--body); color: var(--ink-soft); }
.d-qmarip .title { font-family: var(--display); font-weight: 400; color: #5a3a6a; line-height: .95; }
.d-qmarip .mp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1) calc(var(--u) * 3); width: 84%; margin: 0; text-align: left; } .d-qmarip .mp-facts > div { display: grid; border-bottom: 1px solid #d8cfc0; padding-bottom: calc(var(--u) * .3); }
.d-qmarip dt { font: 600 calc(var(--u) * 2.4) / 1.2 var(--body); text-transform: uppercase; letter-spacing: .16em; color: #b06a5a; } .d-qmarip dd { margin: 0; font: 500 calc(var(--u) * 3.3) / 1.2 var(--body); color: var(--ink); overflow-wrap: anywhere; }
.d-qmarip .note { font: italic 500 calc(var(--u) * 3.2) / 1.3 var(--body); color: var(--ink-soft); } .d-qmarip .mp-sign { margin: 0; font: 400 calc(var(--u) * 5.4) / 1.1 var(--display); color: #5a3a6a; }
.d-qmarip .scratch { box-shadow: 0 0 0 calc(var(--u) * 1) #e8a593, 0 0 0 calc(var(--u) * 1.6) #fdf8ee, 0 0 0 calc(var(--u) * 2.1) #8aa88a, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(58, 42, 74, .3); }
.d-qmarip .prize { background: radial-gradient(circle, #fff, #f6eefc); color: var(--ink); } .d-qmarip .p-label { font-family: var(--body); font-weight: 600; color: #b06a5a; letter-spacing: .14em; } .d-qmarip .p-text { font-family: var(--display); font-weight: 400; color: #5a3a6a; }
.d-qmarip .scratch-hint { font: italic 500 calc(var(--u) * 3) / 1.2 var(--body); letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }

/* ====================================================== Lotería de Quince: the salón (teal walls; her little floor is pink-and-white tiles) ====================================================== */
body.d-qlot { --bg: #0e3a3a; --env-back: #1a8a86; --env-l: #ff6fae; --env-r: #f066a4; --env-b: #ff8fbd; --flap: #27c6c0; --flap-in: #1a8a86; --edge: rgba(255, 255, 255, .8);
  --paper: #fffaf0; --ink: #1a1a1a; --ink-soft: #5a4a4a; --accent: #d4194a; --ray1: #fff3cc; --ray2: #ffe19a; --display: "Rozha One", Georgia, serif; --body: "Work Sans", system-ui, sans-serif; --t1: 9; --t2: 7.6; --t3: 6.2; color: #fff6e8; }
.d-qlot .bg { background: #0e3a3a; }
.d-qlot .lwall { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #0e3a3a 0 34px, #134646 34px 68px); }
.d-qlot .qstand { --qf-top: conic-gradient(#ff8fbd 25%, #fff0f6 0 50%, #ff8fbd 0 75%, #fff0f6 0) 0 0 / 20px 20px; --qf-edge: #c2406e; --qf-rim: #ffffff; }
.d-qlot .tap-hint, .d-qlot .quiet { color: #fff6e8; font-family: var(--body); font-weight: 600; }
.d-qlot .ev-from { color: #1a1a1a; font-family: var(--display); text-transform: none; }
.d-qlot .card { background: #fffaf0; border-radius: 3px; color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * 1.4) #1a1a1a, 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-qlot .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2); border: calc(var(--u) * .5) solid #d4194a; pointer-events: none; }
.d-qlot .card-in { gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 6) calc(var(--u) * 6.5); }
.d-qlot .lt-top { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin: 0; font: 400 calc(var(--u) * 4.4) / 1 var(--display); color: #d4194a; } .d-qlot .lt-top span { font: 700 calc(var(--u) * 3) / 1 var(--body); letter-spacing: .1em; color: #1a1a1a; }
.d-qlot .title { font-family: var(--display); font-weight: 400; color: #1a1a1a; }
.d-qlot .lt-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.2); width: 100%; }
.d-qlot .lt-c { position: relative; display: grid; justify-items: center; align-content: center; gap: 0; height: calc(var(--u) * 11.5); padding: calc(var(--u) * .6); border: calc(var(--u) * .45) solid #1a1a1a; border-radius: 2px; background: #ffffff; }
.d-qlot .lt-c:nth-child(odd) { background: #fff0f6; } .d-qlot .lt-row + .scratch + .scratch-hint + .lt-row .lt-c:nth-child(odd) { background: #e6f8f7; }
.d-qlot .lt-c i { position: absolute; left: calc(var(--u) * .7); top: calc(var(--u) * .3); font: 700 calc(var(--u) * 2.2) / 1 var(--body); font-style: normal; color: #d4194a; }
.d-qlot .lt-c b { font-size: calc(var(--u) * 5); line-height: 1.05; } .d-qlot .lt-c small { font: 700 calc(var(--u) * 1.95) / 1.05 var(--body); letter-spacing: .02em; text-transform: uppercase; color: #1a1a1a; white-space: nowrap; }
.d-qlot .lt-for { margin: 0; font: 600 calc(var(--u) * 3.3) / 1.2 var(--body); color: var(--ink); } .d-qlot .lt-for b { color: #d4194a; }
.d-qlot .lt-where { margin: 0; font: 500 calc(var(--u) * 3.1) / 1.15 var(--body); color: var(--ink-soft); }
.d-qlot .note { font: 500 calc(var(--u) * 3) / 1.3 var(--body); color: var(--ink-soft); } .d-qlot .lt-sign { margin: 0; font: 400 calc(var(--u) * 3.6) / 1.2 var(--display); color: #1a8a86; }
.d-qlot .scratch { width: calc(var(--u) * 30); height: calc(var(--u) * 30); box-shadow: 0 0 0 calc(var(--u) * 1) #1a1a1a, 0 0 0 calc(var(--u) * 1.6) #fffaf0, 0 0 0 calc(var(--u) * 2.3) #27c6c0, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, .3); }
.d-qlot.t-m .scratch, .d-qlot.t-l .scratch, .d-qlot.n-l .scratch { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.d-qlot .prize { background: radial-gradient(circle, #fff, #fff0f6); color: var(--ink); } .d-qlot .p-label { font-family: var(--body); font-weight: 700; color: #d4194a; } .d-qlot .p-text { font-family: var(--display); font-weight: 400; color: #1a1a1a; }
.d-qlot .scratch-hint { font: 600 calc(var(--u) * 2.9) / 1.2 var(--body); letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }

/* ====================================================== El Vals: the ballroom ====================================================== */
body.d-qvals { --bg: #2a1a24; --env-back: #c9b07a; --env-l: #fbf5e8; --env-r: #f5eedc; --env-b: #fffaf0; --flap: #efe3c8; --flap-in: #c9b07a; --edge: rgba(168, 138, 74, .7);
  --paper: #fffaf0; --ink: #4a3418; --ink-soft: #7a6a52; --accent: #a88a4a; --ray1: #fff3cc; --ray2: #fbf1dc; --display: "Pinyon Script", cursive; --body: "EB Garamond", Georgia, serif; --t1: 11.6; --t2: 9.6; --t3: 7.8; color: #fbf1dc; }
.d-qvals .bg { background: #2a1a24; }
.d-qvals .bwall { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 44% at 50% 24%, #5a3a48, transparent 72%), repeating-linear-gradient(90deg, #3a2430 0 70px, #4a2e3c 70px 74px, #3a2430 74px 140px); }
.d-qvals .qstand { --qf-top: repeating-linear-gradient(45deg, #a8743f 0 10px, #8a5a2e 10px 20px); --qf-edge: #6a4422; --qf-rim: #e2c98f; }
.d-qvals .tap-hint, .d-qvals .quiet { color: #fbf1dc; font-family: var(--body); }
.d-qvals .ev-from { color: #7a5a2a; font-family: var(--display); text-transform: none; }
.d-qvals .vl-tassel { position: absolute; z-index: 3; left: 50%; top: calc(60.6% + var(--ew) * .07); width: calc(var(--ew) * .032); height: calc(var(--ew) * .07); margin-left: calc(var(--ew) * -.016); border-radius: 30% 30% 45% 45%; background: repeating-linear-gradient(90deg, #e2c98f 0 2px, #a88a4a 2px 3px); pointer-events: none; }
.go .vl-tassel { animation: sealgo .42s ease-in forwards; }
.d-qvals .card { background: #fffaf0; border-radius: calc(var(--u) * 3); color: var(--ink); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-qvals .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.6); border: calc(var(--u) * .4) solid #e2c98f; border-radius: calc(var(--u) * 2); pointer-events: none; }
.d-qvals .card::after { content: ""; position: absolute; left: 50%; top: calc(var(--u) * 4.4); width: calc(var(--u) * 3); height: calc(var(--u) * 3); margin-left: calc(var(--u) * -1.5); border-radius: 50%; background: #2a1a24; box-shadow: 0 0 0 calc(var(--u) * .5) #a88a4a; pointer-events: none; }
.d-qvals .card-in { gap: calc(var(--u) * 1.6); }
.d-qvals .vl-top { margin: calc(var(--u) * 2) 0 0; font: 400 calc(var(--u) * 6.4) / 1 var(--display); color: #a88a4a; }
.d-qvals .title { font-family: var(--body); font-weight: 600; color: #4a3418; letter-spacing: .01em; }
.d-qvals .vl-list { list-style: none; margin: 0; padding: 0; width: 78%; display: grid; gap: calc(var(--u) * .4); }
.d-qvals .vl-list li { display: flex; align-items: baseline; gap: calc(var(--u) * 2); border-bottom: 1px solid #e8dcc0; font: 500 calc(var(--u) * 3.4) / 1.25 var(--body); color: var(--ink); text-align: left; }
.d-qvals .vl-list span { min-width: calc(var(--u) * 5); font-style: italic; color: #a88a4a; } .d-qvals .vl-list .you { color: #7a1a3a; font-weight: 600; } .d-qvals .vl-list .you b { font-weight: 700; }
.d-qvals .vl-when { margin: 0; font: 600 calc(var(--u) * 3.7) / 1.15 var(--body); color: var(--ink); } .d-qvals .vl-where { margin: 0; font: italic 500 calc(var(--u) * 3.4) / 1.15 var(--body); color: var(--ink-soft); }
.d-qvals .note { font: italic 500 calc(var(--u) * 3.2) / 1.3 var(--body); color: var(--ink-soft); } .d-qvals .vl-sign { margin: 0; font: 400 calc(var(--u) * 5.4) / 1.1 var(--display); color: #7a5a2a; }
.d-qvals .scratch { width: calc(var(--u) * 32); height: calc(var(--u) * 32); box-shadow: 0 0 0 calc(var(--u) * .9) #e2c98f, 0 0 0 calc(var(--u) * 1.5) #fffaf0, 0 0 0 calc(var(--u) * 2) #a88a4a, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(74, 52, 24, .3); }
.d-qvals.t-m .scratch, .d-qvals.t-l .scratch, .d-qvals.n-l .scratch { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.d-qvals .prize { background: radial-gradient(circle, #fff, #fbf1dc); color: var(--ink); } .d-qvals .p-label { font-family: var(--body); font-weight: 600; color: #a88a4a; letter-spacing: .14em; } .d-qvals .p-text { font-family: var(--display); font-weight: 400; color: #4a3418; }
.d-qvals .scratch-hint { font: italic 500 calc(var(--u) * 3) / 1.2 var(--body); letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }

/* ====================================================== The words on the envelope ====================================================== */
/* The user, 2026-11-08: the words were printed across the pocket's two diagonal lines; they belong in the middle, between them. The bottom flap of the pocket is a triangle whose point is
   at 45.5% of the envelope's height (POCKET in make-envelope-cards.mjs: 0,66 50,30 100,66), and the seal reaches down to about 74%. So the words keep to the middle 56% of the width, a little
   above the bottom edge, in at most two balanced lines: at the top of two lines the triangle is still about 65% wide, so nothing touches a line. */
:is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .ev-from { left: 22%; right: 22%; bottom: 6%; font-size: calc(var(--ew) * .03); line-height: 1.25; letter-spacing: .08em; text-wrap: balance; }
.d-qmarip .ev-from { font-size: calc(var(--ew) * .036); letter-spacing: .04em; }
.d-qlot .ev-from { font-size: calc(var(--ew) * .04); letter-spacing: .03em; }
.d-qvals .ev-from { font-size: calc(var(--ew) * .052); letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
  .d-qseren .sky, .d-qneon .lasers i, :is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .p-queen .skirt, :is(.d-qcorona, .d-qseren, .d-qneon, .d-qmarip, .d-qlot, .d-qvals) .p-cake.on .flm { animation: none; }
}