/* Part 2, the gift game's scenes (docs/christmas-game/gift/DIRECTORS-SCRIPT.md), on core.css. It starts as the tree
   game's stylesheet (the same room, tree, cast, panel, board and answers drawer; tree.css itself stays as it is) and
   adds the gift game's own pieces at the end: the wish list on the desk, the market, the presents, the morning. */

/* ── the cast ───────────────────────────────────────────────────────────────────────────────────────────────── */
.xm-char { position: relative; flex: none; }
.xm-char img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.28)); -webkit-user-drag: none; user-select: none; }
.xm-char img.is-art { object-position: 50% 100%; transform-origin: 50% 100%; animation: xm-breathe 2.8s ease-in-out infinite; }
.xm-elf { transform-origin: 50% 100%; animation: xm-breathe 2.4s ease-in-out infinite; }
.xm-char { transform-origin: 50% 100%; }
.xm-char.is-mirrored { scale: -1 1; }                /* a pose turned to face the other way (tree.js) */
@keyframes xm-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.018, .982); } }
@media (prefers-reduced-motion: reduce) { .xm-char img.is-art, .xm-elf { animation: none; } }
.xm-hat { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.xm-art { display: block; max-width: none; -webkit-user-drag: none; user-select: none; }
.xm-elf { display: block; height: auto; filter: drop-shadow(0 5px 5px rgba(0,0,0,.3)); }
.xm-puppy { display: block; height: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }

/* ── the creator's screens: a painted scene on top, the cream panel below (as the friend's stage) ───────────── */
.xm-scene.is-staged { padding: 0; gap: 0; }
/* below the painted stage everything is the cream panel's colour (the ad slot, the page's end) */
.xm-scene.is-staged, .xm-scene.is-result, .xm-scene.is-reveal { background: #FBE7C6; }
.xm-play .xm-actions .xm-btn { font-size: clamp(16px, 4.8vw, 19px); }
.xm-play.is-page { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; }
.xm-play .xm-sub, .xm-play .xm-small { color: #6B5A4E; }
.xm-play .xm-label, .xm-play .xm-h2 { color: var(--ink); }
.xm-play .xm-step { background: #fff; border-color: #F1E2C8; color: #6B5A4E; box-shadow: 0 3px 0 #EEDCBC; }
.xm-play .xm-step strong { color: var(--ink); }
.xm-play .xm-chip { border-color: #E3CFAD; background: #fff; color: var(--ink); }
.xm-play .xm-who-card { background: #fff; border-color: #F1E2C8; color: var(--ink); box-shadow: 0 4px 0 #EEDCBC; }
.xm-play .xm-who-card.is-picked { background: #FFF6D8; border-color: var(--gold); }
.xm-play .xm-input { border: 3px solid #EBD9BA; }
/* on the cream panel the error is dark red (the night theme's pink can't be read on paper); no gap while there is none */
.xm-play .xm-error { color: var(--red-d); }
.xm-play.is-page .xm-error:empty { min-height: 0; margin-top: -14px; }
.xm-hero { position: relative; flex: none; height: 58vh; height: 58dvh; min-height: 380px; overflow: hidden; }
.xm-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.xm-hero-glow { position: absolute; left: 50%; top: 46%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,217,160,.5), rgba(255,217,160,0) 62%); animation: xm-star 2.6s ease-in-out infinite alternate; }
.xm-hero-top { position: absolute; z-index: 5; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); }
/* over painted scenes the brand in letters sits on a dark glass pill, so it reads on snow and roofs alike (the logo
   has its own white one) */
.xm-hero-top .xm-site:not(.is-logo) { padding: 5px 11px; border-radius: 99px; background: rgba(28,20,44,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.xm-hero .xm-landing-title { position: absolute; z-index: 4; left: 16px; right: 16px; top: calc(58px + env(safe-area-inset-top)); margin: 0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.xm-hero .xm-logo-top { font-size: clamp(17px, 5.6vw, 24px); max-width: 100%; }
/* the big line keeps the 16 px gutter: it wraps at a space, and a word too long alone is shrunk (fitText, landing) */
.xm-hero .xm-logo-main { font-size: clamp(34px, 11.4vw, 52px); max-width: 100%; }
.xm-hero-host { position: absolute !important; z-index: 4; right: 6%; bottom: 34px; }
.xm-hero-box { position: absolute; z-index: 3; left: 8%; bottom: 40px; width: 26%; height: auto; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.xm-hero .xm-snow { z-index: 2; }
/* the mantel: the painting is full width and placed so its hooks (49% down the picture) sit 240px from the top,
   clear of the top bar; the stockings hang on the hooks, the Elf sits on the shelf (33% down) */
.is-staged .xm-mantel { flex: none; height: 350px; margin: 0; border: 0; border-radius: 0; overflow: hidden; container-type: inline-size; background: #6B3A2A; }
.xm-mantel-art { position: absolute; left: 0; width: 100%; aspect-ratio: 768 / 1376; top: calc(240px - var(--cq, 1cqw) * 87.8); }
.xm-mantel-art .xm-mantel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; border-radius: 0; }
.xm-mantel-art .xm-stockings { position: absolute; inset: 0; width: auto; display: block; }
/* each stocking on a painted hook (the hooks: 18%, 34%, 50%, 66%, 81% across, 38% down) */
.xm-mantel-art .xm-stocking { position: absolute; top: 37%; width: 17%; transform: translateX(-50%); }
.xm-mantel-art .xm-stocking:nth-child(1) { left: 18%; width: 27%; }
.xm-mantel-art .xm-stocking:nth-child(2) { left: 50%; }
.xm-mantel-art .xm-stocking:nth-child(3) { left: 81%; }
/* the Elf sits on the shelf (31% down the picture = 240px − 32.3cqw from the top), left of the sound button, and is
   only as tall as the room under the top bar allows (it ends 51px down), so he never sits under the bar's pills */
.xm-mantel-art .xm-mantel-elf { top: auto; bottom: 69%; right: 17%; width: auto; height: min(84px, calc(182px - var(--cq, 1cqw) * 32.3)); }
/* the name on the white fluffy cuff (11–73% across, 13–38% down the stocking picture) */
/* the name across the cuff, as wide as the stocking (a long one takes two lines and may reach onto the red: the white
   edge keeps it readable there); tree.js shrinks it only down to a size that can still be read */
.xm-mantel-art .xm-stocking-name { left: 3%; right: 10%; top: 13%; height: auto; min-height: 24%; rotate: 0deg; -webkit-text-stroke-width: 2.5px; color: var(--red-d); -webkit-text-stroke-color: #fff; display: flex; align-items: center; justify-content: center; white-space: normal;
  overflow: visible; overflow-wrap: normal; word-break: keep-all; line-height: .95; font-size: calc(clamp(13px, 4vw, 16px) * var(--fs, 1)); text-overflow: clip; }
.is-staged .xm-moodhost { flex: none; height: clamp(300px, 42vh, 340px); border: 0; border-radius: 0; }
.xm-moods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xm-mood { min-width: 0; }
.xm-mood > span { min-width: 0; overflow-wrap: normal; hyphens: manual; }
/* Japanese phrases / Korean words are kept whole (core.css): one wider than the card ("クリスマスソング無限ループ") breaks */
:lang(ja) .xm-mood > span, :lang(ko) .xm-mood > span { overflow-wrap: anywhere; }
/* narrow phones: the picture above the words, so a word never breaks */
@media (max-width: 374px) {
  .xm-mood { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center; font-size: 14px; }
  .xm-mood-pic { width: 56px; height: 56px; }
  .xm-mood > span { text-align: center; }          /* a two-line label centred like the one-line ones */
}
.xm-scene.is-staged > .xm-play.is-page { flex: 1 0 auto; }
.is-staged .xm-moodhost-bg { border-radius: 0; }
.is-staged .xm-moodhost .xm-char { margin-bottom: 30px; }
.xm-play .xm-mood { border-color: #F1E2C8; box-shadow: 0 4px 0 #EEDCBC; }
/* ── 1.1 the landing: the window ──────────────────────────────────────────────────────────────────────────── */
.is-landing { gap: 14px; }
.xm-window { position: relative; height: clamp(190px, 33vh, 270px); margin: 4px 6px 12px; border: 10px solid #6A3E2A; border-radius: 16px 16px 8px 8px;
  overflow: hidden; background: #2A1A22; box-shadow: 0 0 0 3px #3B2A26, 0 0 46px rgba(255,217,160,.42); }
.xm-window-room { position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, #FFE7BE 0, #FFD9A0 30%, #E9A86A 75%, #C9814A 100%); }
.xm-window-tree { position: absolute; left: 8%; bottom: -2%; height: 104%; width: auto; }
.xm-window-host { position: absolute; right: 6%; bottom: 0; }
.xm-window-box { position: absolute; right: 34%; bottom: -4px; width: 64px; }
.xm-window-boxsvg { display: block; width: 100%; height: auto; }
.xm-window-bars::before, .xm-window-bars::after { content: ''; position: absolute; z-index: 2; background: #6A3E2A; box-shadow: 0 0 0 2px #3B2A26; }
.xm-window-bars::before { left: 50%; top: 0; bottom: 0; width: 8px; transform: translateX(-50%); }
.xm-window-bars::after { top: 46%; left: 0; right: 0; height: 8px; }
.xm-window-frost { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,.75) 0, rgba(255,255,255,0) 24%), radial-gradient(circle at 100% 0, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 20%),
    radial-gradient(circle at 0 100%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 18%), radial-gradient(circle at 100% 100%, rgba(255,255,255,.7) 0, rgba(255,255,255,0) 22%); }
.xm-window-sill { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 12px; background: var(--snow); border-radius: 10px 10px 0 0; }
.xm-landing-title { margin-top: 10px; }
.xm-landing-title .xm-logo-main { padding-top: 14px; }
.xm-title-lights { position: absolute; left: 50%; top: -6px; width: 88%; height: auto; transform: translateX(-50%); overflow: visible; }
.xm-steps { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.xm-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.12);
  font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--soft); }
.xm-step strong { color: #fff; }
.xm-step-n { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red);
  color: #fff; font: 800 16px/1 var(--title); box-shadow: 0 3px 0 var(--red-d); }

/* the lights (tree and title): dark until their string switches on, then they glow and twinkle */
.xm-bulb { fill: #4E5566; stroke: #23222B; stroke-width: 1.2; transition: fill .35s; }
.xm-glow { opacity: 0; transition: opacity .45s; }
.is-on .xm-bulb, .is-on.xm-bulb { fill: var(--c); }
.is-on .xm-glow { opacity: .55; animation: xm-bulb 1.6s ease-in-out infinite alternate; }
@keyframes xm-bulb { from { opacity: .25; } to { opacity: .7; } }
/* a low-end phone (core.js LITE): steady glows — eighty twinkling SVG circles repaint the whole tree every frame */
.xm-lite .is-on .xm-glow { animation: none; opacity: .5; }
/* a low-end phone (core.js LITE): the same film, lighter on a budget GPU — the market's background lights stand still
   and unblended, the world doesn't float, an unopened present keeps its glow but not its bob and repainting halo,
   the spotlit present pops without an animated shadow */
.xm-lite .xm-bokeh { animation: none; mix-blend-mode: normal; filter: none; opacity: .28; }
.xm-lite .xm-market-world { animation: none; }
.xm-lite .xm-present.is-new .xm-present-swing { animation: none; }
.xm-lite .xm-present.is-new .xm-present-pic { filter: drop-shadow(0 5px 4px rgba(0,0,0,.3)); }
.xm-lite .xm-present.is-spot { animation: none; transform: translate(-50%, -100%) scale(1.25); }   /* still the big one */
.xm-bulb.is-fizzle { animation: xm-fizzle .9s ease-out; }
@keyframes xm-fizzle { 0% { fill: #fff; } 20% { fill: #FFD34D; } 35% { fill: #4E5566; } 50% { fill: #FFF3B0; } 100% { fill: #4E5566; } }

/* ── 1.2 the stocking ─────────────────────────────────────────────────────────────────────────────────────── */
.xm-mantel { position: relative; height: 200px; margin-top: 30px; border-radius: 16px; border: 3px solid #3B2A26; background: #7E3326; overflow: visible; }
.xm-mantel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; border-radius: 13px; }
.xm-fire { position: absolute; left: 50%; bottom: 0; width: 44%; height: 44%; transform: translateX(-50%); border-radius: 46% 46% 0 0 / 40% 40% 0 0;
  background: radial-gradient(circle at 50% 100%, #6B2A14 0, #2A1410 70%); border: 3px solid #3B2A26; border-bottom: 0; overflow: hidden; }
.xm-flame { position: absolute; left: 50%; bottom: -6px; width: 36%; height: 78%; margin-left: -18%; border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(circle at 50% 76%, #FFF3B0 0, #FFD34D 30%, #FF8A3D 62%, rgba(232,66,63,0) 76%); animation: xm-flame 1.1s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.xm-flame.is-2 { margin-left: -42%; width: 28%; height: 56%; animation-duration: .9s; animation-delay: -.3s; }
.xm-flame.is-3 { margin-left: 12%; width: 28%; height: 62%; animation-duration: 1.3s; animation-delay: -.6s; }
@keyframes xm-flame { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.9, 1.12) rotate(3deg); } }
.xm-mantel-shelf { position: absolute; left: -8px; right: -8px; top: 30%; height: 16px; border-radius: 6px; background: linear-gradient(#8A5A33, #6A3E2A); border: 3px solid #3B2A26; }
.xm-stockings { position: absolute; left: 7%; top: calc(30% + 10px); display: flex; align-items: flex-start; gap: 5%; width: 62%; }
.xm-stocking { position: relative; width: 23%; transform-origin: 50% 0; }
.xm-stocking.is-mine { width: 36%; }
.xm-stocking-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 3px rgba(0,0,0,.3)); }
.xm-stocking-svg.is-1 { filter: hue-rotate(135deg) saturate(.8) drop-shadow(0 4px 3px rgba(0,0,0,.3)); }
.xm-stocking-svg.is-2 { filter: hue-rotate(45deg) saturate(1.2) brightness(1.15) drop-shadow(0 4px 3px rgba(0,0,0,.3)); }
.xm-stocking-name { position: absolute; left: 14%; right: 18%; top: 34%; overflow: hidden; color: #fff; text-align: center; white-space: nowrap; text-overflow: ellipsis;
  font: 800 clamp(12px, 3.6vw, 15px)/1.1 var(--hand); -webkit-text-stroke: 3px rgba(80,10,10,.55); paint-order: stroke fill; rotate: -6deg; }
.xm-stocking-name.is-paint { animation: xm-paint .35s ease-out; }
@keyframes xm-paint { from { filter: brightness(1.8); transform: scale(1.12); } }
.xm-stocking.is-swing { animation: xm-swing 1.1s ease-in-out; }
@keyframes xm-swing { 20% { rotate: 12deg; } 45% { rotate: -9deg; } 70% { rotate: 5deg; } 100% { rotate: 0deg; } }
.xm-mantel-elf { position: absolute; right: 5%; top: calc(30% - 70px); width: 62px; }
.xm-mantel .xm-say { z-index: 7; }
.xm-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.xm-who-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 10px; border: 3px solid rgba(255,255,255,.2); border-radius: 20px;
  background: rgba(255,255,255,.08); color: #fff; font: 800 18px/1 var(--title); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.xm-who-card .xm-char { margin: 8px 0 8px; }            /* the cheer sticker reaches ~11px past the still's floor */
.xm-who-card > span { position: relative; }               /* the label paints over the art, never under it */
.xm-who-card.is-picked { border-color: var(--gold); background: rgba(255,211,77,.16); box-shadow: 0 0 0 3px rgba(255,211,77,.25), 0 10px 24px rgba(0,0,0,.25); }
.xm-who-card:active { transform: scale(.97); }

/* ── 1.3 the mood ─────────────────────────────────────────────────────────────────────────────────────────── */
.xm-moodhost { position: relative; height: 150px; display: flex; justify-content: center; align-items: flex-end; border-radius: 18px; border: 3px solid rgba(255,255,255,.22); }
.xm-moodhost-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; border-radius: 15px; }
.xm-moodhost .xm-char { margin-bottom: 4px; }
.xm-moods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.xm-mood { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 6px 10px 6px 6px; border: 3px solid #fff; border-radius: 16px; background: var(--paper); color: var(--ink);
  font: 800 15px/1.2 'Nunito', sans-serif; text-align: left; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.2); transition: transform .15s, box-shadow .15s; }
.xm-mood-pic { flex: none; width: 52px; height: 52px; object-fit: contain; }
.xm-mood:nth-child(odd) { rotate: -1.2deg; } .xm-mood:nth-child(even) { rotate: 1deg; }
.xm-mood.is-picked { position: relative; background: #FFF1C2; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 6px 0 var(--gold-d); }
/* the picked vibe's star is drawn (a ★ character sat ~2.5 px high and every phone's font placed it differently):
   dead centre in its gold circle (owner's team, 2026-11-03) */
.xm-mood.is-picked::after { content: ''; position: absolute; top: -12px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--outline);
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.5 6 .7-4.45 4.1 1.2 5.95L12 16.5l-5.35 2.95 1.2-5.95L3.4 9.4l6-.7z' fill='%233B2A26'/%3E%3C/svg%3E") center / 17px 17px no-repeat; }
.xm-chips { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.xm-chip { min-height: 42px; padding: 0 16px; border: 2px solid rgba(255,255,255,.35); border-radius: 99px; background: rgba(255,255,255,.08); color: #fff;
  font: 800 15px/1 'Nunito', sans-serif; cursor: pointer; white-space: nowrap; }
.xm-chip.is-red { background: var(--red); border-color: var(--red); }

/* ── the camera on the tree (one tall layer: TILT = translateY, WIDE = scale) ──────────────────────────────── */
.xm-cam { position: relative; flex: none; height: clamp(230px, 43vh, 400px); border-radius: 22px; overflow: hidden; background: #3A2742;
  border: 3px solid rgba(255,255,255,.22); box-shadow: 0 14px 30px rgba(0,0,0,.35); isolation: isolate; }
.xm-shot { position: absolute; inset: 0; transform-origin: 50% 62%; }
.xm-cam-backdrop { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(8px) brightness(.62) saturate(.9); }
.xm-cam.is-full { height: auto; aspect-ratio: 1 / 2; width: min(100%, 48vh); margin: 0 auto; }
.xm-layer { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1 / 2; transform-origin: 50% 0; container-type: inline-size;
  transition: transform .95s cubic-bezier(.45,0,.2,1); will-change: transform; }
/* the tree: room picture, painted tree, the SVG of lights and glow, the star (all in 320 × 640 units) */
.xm-tree-art { position: absolute; aspect-ratio: 1 / 2; overflow: hidden; pointer-events: none; }
.xm-layer > .xm-tree-art { inset: 0; width: 100%; height: 100%; }
.xm-room-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.xm-tree-pic { position: absolute; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.xm-star-pic { position: absolute; left: 50%; top: 4.1%; width: 16%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.xm-tree-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xm-dimmer { opacity: 0; transition: opacity .8s; pointer-events: none; }
.xm-cam.is-dim .xm-dimmer { opacity: .62; }
.xm-star-glow { opacity: .12; transition: opacity .8s; transform-box: fill-box; transform-origin: center; }
.is-star .xm-star-glow { opacity: 1; animation: xm-star 2.4s ease-in-out infinite alternate; }
@keyframes xm-star { from { transform: scale(.9); } to { transform: scale(1.12); } }
.xm-box-front, .xm-box-lid { position: absolute; display: block; height: auto; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
.xm-box-front { width: 25%; z-index: 5; }
.xm-box-lid { width: 27%; z-index: 6; transform-origin: 0 100%; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.xm-box-lid.is-up { transform: translateX(-50%) translate(-14%, -120%) rotate(-24deg); }
.xm-deco { position: absolute; z-index: 2; width: calc(var(--cq, 1cqw) * 8.5); height: auto; transform: translate(-50%, 0); filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.xm-hook { position: absolute; z-index: 2; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; }
.xm-hook::before { content: ''; width: calc(var(--cq, 1cqw) * 2.2); height: calc(var(--cq, 1cqw) * 3); border: calc(var(--cq, 1cqw) * .7) solid var(--gold); border-bottom: 0; border-radius: 99px 99px 0 0; }
.xm-hook i { display: block; min-width: calc(var(--cq, 1cqw) * 5.2); padding: calc(var(--cq, 1cqw) * .4) var(--cq, 1cqw); border-radius: calc(var(--cq, 1cqw) * 1.2);
  background: var(--paper); border: calc(var(--cq, 1cqw) * .5) solid var(--outline);
  color: var(--red-d); font: 800 calc(var(--cq, 1cqw) * 3.6)/1 var(--title); font-style: normal; text-align: center; }

/* ── the friend's stage: the room fills the screen, the answers on a cream panel, the cast standing on its edge ── */
/* the stage takes what the answers leave of the screen, but never less than a real view of the tree (where the
   ornament lands and the lights come on); a question with many answers makes the page grow and scroll instead */
.xm-scene.is-climb { height: auto; min-height: 100vh; min-height: 100dvh; padding: 0; gap: 0; }
.xm-small.is-dark, .xm-link.is-dark { color: #7A665A; }
.xm-play .xm-opts.is-many .xm-opt-text { font-size: 13px; }
.xm-cam.is-stage { border: 0; border-radius: 0; box-shadow: none; --elf-h: 150px; }
.is-climb .xm-cam.is-stage { flex: 1 0 auto; height: auto; min-height: clamp(210px, 38vh, 340px); min-height: clamp(210px, 38dvh, 340px); }
/* the garland of progress: unlit bulbs are dimmed glass, a lit one glows and twinkles */
/* along the stage's top edge (no top bar on this stage, only the sound button), so it leaves the tree its room */
.xm-garland { position: absolute; z-index: 10; left: -4%; right: -4%; top: calc(-2px + env(safe-area-inset-top)); pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.xm-garland { transition: opacity .5s, translate .5s; }
.xm-cam.is-wide .xm-garland { opacity: 0; translate: 0 -60%; }
.xm-garland-pic { width: 100%; height: auto; }
.xm-garland i { position: absolute; top: 54%; width: 4.2%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(34,30,48,.72);
  transition: background .4s, box-shadow .4s; }
.xm-garland i.is-on { background: rgba(255,255,255,.18); box-shadow: 0 0 10px 4px rgba(255,236,160,.85), 0 0 22px 8px rgba(255,211,77,.45); animation: xm-twinkle 1.4s ease-in-out infinite alternate; }
@keyframes xm-twinkle { from { opacity: .75; } to { opacity: 1; } }
.is-stage .xm-cam-elf { top: auto; bottom: 30px; left: 6px; width: auto; height: var(--elf-h); }
.is-stage .xm-cam-host { bottom: 28px; right: 4px; }
/* the answer panel: warm paper, snow resting on its edge, a red ribbon with the question number */
.xm-play { position: relative; z-index: 12; flex: none; margin-top: -30px; padding: 30px 14px calc(16px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
  background: radial-gradient(120% 60% at 50% 0, #FFFDF7 0, #FFF4E2 60%, #FBE7C6 100%); color: var(--ink); box-shadow: 0 -10px 26px rgba(0,0,0,.32); }
.xm-play { transition: transform .55s cubic-bezier(.2,1.2,.4,1), margin-top .55s; }
.xm-play.is-hidden { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(calc(100% + 40px)); }
/* (core.css makes every scene child position: relative: on the stage a hidden panel must leave the flow, or its empty
   place stays at the foot of the screen during the films, the lights and the endings) */
.xm-scene.is-climb > .xm-play.is-hidden { position: absolute; }
/* the result: the same stage, the ending on a big ribbon over the tree, the score and next steps on the panel */
.xm-scene.is-result { padding: 0; gap: 0; }
.is-result .xm-cam.is-stage { flex: none; height: 64vh; height: 64dvh; min-height: 380px; }
.xm-ribbon.is-title { top: calc(16px + env(safe-area-inset-top)); width: 88%; max-width: 400px; z-index: 11; }
/* the title sits on the band itself (26–74% down the picture), up to two lines; tree.js shrinks a long one to fit */
.xm-ribbon.is-title .xm-ribbon-text { margin: 0; inset: 24% 13% 25%; font-size: clamp(15px, 4.6vw, 21px); letter-spacing: .5px; text-transform: none; white-space: normal; text-align: center; line-height: 1.05; }
/* Chinese breaks between any two characters ("…的树 / 上？"): on a title ribbon only at the spaces around a name */
:lang(zh) .xm-ribbon.is-title .xm-ribbon-text { word-break: keep-all; }
/* the tree reveal: the stage fills the phone; the panel slides up after the film */
.xm-scene.is-reveal { padding: 0; gap: 0; }
.is-reveal .xm-cam.is-stage { flex: none; height: 82vh; height: 82dvh; min-height: 460px; }
/* during the film the panel's snowy edge already waits at the foot of the screen (never an empty block); its
   contents come in as it rises */
.is-reveal .xm-play.is-hidden { position: relative; transform: translateY(40px); pointer-events: none; }
.is-reveal .xm-play > :not(.xm-play-snow) { transition: opacity .4s .15s; }
.is-reveal .xm-play.is-hidden > :not(.xm-play-snow) { opacity: 0; }
.is-reveal .xm-play { transition: transform .6s cubic-bezier(.2,1.2,.4,1), opacity .4s; }
.is-reveal .xm-bauble:not(.is-back) { --bw: calc(var(--cq, 1cqw) * 18); }
.xm-share-block { display: flex; flex-direction: column; gap: 10px; }
.xm-share-block .xm-sub { color: #6B5A4E; }
.is-result-panel .xm-board-heading, .is-result-panel .xm-small { color: #6B5A4E; }
/* the reveal: the cast steps to the edges, a little smaller, so the box and every bauble stay in view */
.is-reveal-cast .xm-cam-host { scale: .8; transform-origin: 100% 100%; right: 0; }
.is-reveal-cast .xm-cam-elf { scale: .78; transform-origin: 0 100%; left: 0; }
.is-swap .xm-cam-host { right: auto; left: 4px; }
/* "still in the box": the host kneels a step away, so the bauble peeking from the box is seen */
.is-swap.is-box-end .xm-cam-host { left: -7%; }
.is-swap .xm-cam-elf { left: auto; right: 6px; }
.is-result-panel { margin-top: -30px; padding-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.xm-endcard-text { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.xm-endcard-line { margin: 0; font: 700 15px/1.35 'Nunito', sans-serif; color: #6B5A4E; }
.is-result-panel .xm-endcard-score { color: var(--ink); }
.is-result-panel .xm-name { color: var(--red-d); }
/* the intro: outside the warm window on the snowy street, before the camera pushes in through the glass */
.xm-outside { position: absolute; inset: 0; z-index: 20; overflow: hidden; transform-origin: 50% 52%; }
.xm-outside-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xm-outside-glow { position: absolute; left: 50%; top: 52%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,217,160,.55), rgba(255,217,160,0) 65%); animation: xm-star 2.4s ease-in-out infinite alternate; }
.xm-play-snow { position: absolute; left: -2%; right: -2%; top: -22px; width: 104%; height: 44px; object-fit: fill; pointer-events: none; }
.xm-ribbon { position: absolute; left: 50%; top: -24px; width: 62%; max-width: 260px; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 4px 4px rgba(0,0,0,.28)); }
.xm-ribbon-pic { width: 100%; height: auto; }
/* on the answer panel the ribbon takes its own room, so its tails never cover the question's first line */
.xm-play > .xm-ribbon { position: relative; left: auto; top: auto; transform: none; margin: -54px auto 0; }
.xm-ribbon-text { position: absolute; inset: 0 18% 8%; display: flex; align-items: center; justify-content: center; color: #fff; white-space: nowrap;
  font: 800 15px/1 var(--title); letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 2px 0 rgba(120,20,20,.6); }
.xm-play .xm-qbox { gap: 12px; padding-top: 6px; }
.xm-play .xm-name { color: var(--red-d); }
.xm-play .xm-q { padding: 2px 4px 0; text-align: center; }
.xm-play .xm-opt { border-color: #fff; box-shadow: 0 6px 0 #E6D3B4, 0 10px 18px rgba(120,80,30,.16); }
.xm-play .xm-opt::before { content: ''; position: absolute; z-index: 1; left: -10px; top: -10px; width: 38px; height: 33px; pointer-events: none;
  background: var(--holly) center / contain no-repeat; rotate: -12deg; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.xm-opt img.xm-ans-pic { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* the cast inside the camera: the Elf announces (top left), the host stands by the tree (bottom right) */
.xm-cam-elf { position: absolute !important; z-index: 6; left: 6px; top: 8px; width: 70px; }
.xm-cam-host, .xm-board-host { position: absolute !important; z-index: 6; right: 4px; bottom: 2px; }
.xm-cam .xm-say { z-index: 11; }
.xm-say.is-puppy { font-family: var(--title); font-size: 18px; }
.xm-meter { position: absolute; z-index: 6; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 8px; background: rgba(0,0,0,.25); }
.xm-meter i { display: block; width: 14px; height: 9px; border-radius: 3px; background: rgba(255,255,255,.16); transition: background .3s, box-shadow .3s; }
.xm-meter i.is-on { background: var(--gold); box-shadow: 0 0 8px rgba(255,211,77,.9); }
.xm-puppy { position: absolute; z-index: 7; bottom: 6px; left: -110px; width: 92px; }
.xm-puppy.is-trot { animation: xm-trot-in .9s cubic-bezier(.3,.8,.4,1) forwards; }
.xm-puppy.is-leave { animation: xm-trot-out .7s ease-in forwards; }
@keyframes xm-trot-in { 0% { transform: translateX(0) translateY(0); } 25% { transform: translateX(45px) translateY(-6px); } 50% { transform: translateX(90px) translateY(0); }
  75% { transform: translateX(118px) translateY(-5px); } 100% { transform: translateX(126px) translateY(0); } }
@keyframes xm-trot-out { from { transform: translateX(126px) scaleX(-1); } to { transform: translateX(-30px) scaleX(-1); } }
.xm-flash { position: absolute; inset: 0; z-index: 30; background: #fff; pointer-events: none; animation: xm-flash .7s ease-out forwards; }
@keyframes xm-flash { from { opacity: .95; } to { opacity: 0; } }

/* ── the baubles (a name painted on glass; on the tree they're sized by the tree's width) ───────────────────── */
.xm-bauble { --bw: calc(var(--cq, 1cqw) * 15); position: absolute; z-index: 3; width: var(--bw); display: flex; flex-direction: column; align-items: center; transform: translateX(-50%);
  transition: left .85s cubic-bezier(.34,1.25,.5,1), top .85s cubic-bezier(.34,1.25,.5,1), scale .4s, opacity .3s; }
/* what swings from the hook: the wire, the cap and the glass (and a long name's tag) */
.xm-bauble-swing { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.xm-bauble-swing::before { content: ''; width: max(1.5px, calc(var(--bw) * .035)); height: calc(var(--bw) * .2); border-radius: 99px; background: linear-gradient(90deg, #8A6410, #FFE07A 50%, #8A6410); }
.xm-bauble-cap { width: 28%; height: calc(var(--bw) * .1); border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, #C99A12, #FFE07A, #C99A12); border: 1.5px solid var(--outline); margin-bottom: -2px; position: relative; z-index: 1; }
/* the glass catches its surroundings: the tree's green on its lower curve, a warm glint of the lights */
.xm-bauble-glass { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; container-type: inline-size; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0, rgba(255,255,255,.4) 9%, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 74% 34%, rgba(255,240,190,.85) 0, rgba(255,240,190,0) 5%),
    radial-gradient(ellipse 70% 34% at 50% 100%, var(--env, rgba(84,190,120,.55)) 0, rgba(84,190,120,0) 100%),
    radial-gradient(circle at 50% 50%, var(--b1) 0, var(--b1) 45%, var(--b2) 100%);
  border: 2px solid var(--outline); box-shadow: inset -4px -6px 0 rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 8px rgba(0,0,0,.3); }
/* its shadow on the needles behind it, down and to the right (the room's light is up on the left) */
.xm-bauble-shadow { position: absolute; z-index: -1; left: 16%; top: calc(var(--bw) * .44); width: 104%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(8,40,22,.7) 0, rgba(8,40,22,.42) 42%, rgba(8,40,22,0) 70%); pointer-events: none; transition: opacity .3s; }
/* the branch tip in front of the hook: the wire comes out from under it */
.xm-bauble-twig { position: absolute; z-index: 2; left: 50%; top: calc(var(--bw) * -.2); width: calc(var(--bw) * var(--twig, .95)); height: auto; transform: translateX(-50%); overflow: visible;
  transform-origin: 50% 0; pointer-events: none; transition: opacity .25s;
  -webkit-mask-image: radial-gradient(ellipse 62% 80% at 50% 72%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 62% 80% at 50% 72%, #000 58%, transparent 100%); }
/* not on a branch (in the box, flying up, at the tree's very edge, off the tree): no branch tip, no shadow */
.xm-bauble.is-boxed .xm-bauble-twig, .xm-bauble.is-flying .xm-bauble-twig, .xm-bauble.is-edge .xm-bauble-twig,
.xm-bauble.is-big .xm-bauble-twig, .xm-bauble.is-sheet .xm-bauble-twig { opacity: 0; }
.xm-bauble.is-boxed .xm-bauble-shadow, .xm-bauble.is-flying .xm-bauble-shadow, .xm-bauble.is-big .xm-bauble-shadow, .xm-bauble.is-sheet .xm-bauble-shadow { opacity: 0; }
/* it lands: the branch dips under the weight, the bauble swings and settles */
.xm-bauble.is-landed .xm-bauble-swing { animation: xm-land 1.5s cubic-bezier(.3,.6,.4,1); }
.xm-bauble.is-landed .xm-bauble-twig { animation: xm-dip .7s cubic-bezier(.3,1.5,.5,1); }
@keyframes xm-land { 0% { rotate: 16deg; } 22% { rotate: -11deg; } 44% { rotate: 6deg; } 66% { rotate: -3deg; } 84% { rotate: 1deg; } 100% { rotate: 0deg; } }
@keyframes xm-dip { 0% { transform: translateX(-50%); } 30% { transform: translateX(-50%) translateY(7%) scaleY(1.1); } 100% { transform: translateX(-50%); } }
.xm-bauble-name { max-width: 90%; white-space: nowrap; overflow: hidden; color: #fff; font: 800 calc(var(--cq, 1cqw) * 30 * var(--fs)) / 1.1 var(--hand);
  -webkit-text-stroke: max(2px, calc(var(--cq, 1cqw) * 5 * var(--fs))) rgba(40,20,20,.55); paint-order: stroke fill; letter-spacing: .01em; }
.xm-bauble-name.is-paint { animation: xm-paint .35s ease-out; }
/* a monogrammed bauble (long names): a big letter on the glass, the full name on a tag hanging below */
.xm-bauble.is-mono .xm-bauble-name { font-size: calc(var(--cq, 1cqw) * 46 * var(--fs)); line-height: 1; }
.xm-bauble-tag { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 3px); max-width: calc(var(--cq, 1cqw) * 38);
  padding: calc(var(--cq, 1cqw) * .5) calc(var(--cq, 1cqw) * 1.8); border-radius: calc(var(--cq, 1cqw) * 1.2);
  background: #FFF8EC; border: calc(var(--cq, 1cqw) * .45) solid var(--outline); color: var(--ink); font: 800 calc(var(--cq, 1cqw) * 3.9)/1.15 var(--title);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 calc(var(--cq, 1cqw) * .6) var(--cq, 1cqw) rgba(0,0,0,.3); pointer-events: none; }
/* the friend's own bauble keeps a gentle sway in the warm air (after a landing's swing has settled) */
.xm-bauble.is-friend { --bw: calc(var(--cq, 1cqw) * 20); z-index: 4; }   /* the hero: big enough for a whole name */
.xm-bauble.is-friend .xm-bauble-swing { animation: xm-sway 3.4s ease-in-out infinite alternate; }
.xm-bauble.is-friend.is-landed .xm-bauble-swing { animation: xm-land 1.5s cubic-bezier(.3,.6,.4,1), xm-sway 3.4s ease-in-out 1.5s infinite alternate; }
@keyframes xm-sway { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
.xm-bauble.is-friend .xm-bauble-glass { box-shadow: inset -4px -6px 0 rgba(0,0,0,.14), 0 0 0 3px rgba(255,255,255,.75), 0 0 18px rgba(255,243,176,.8); }
.xm-bauble.is-back { --bw: calc(var(--cq, 1cqw) * 11); z-index: 2; opacity: .85; filter: saturate(.85) brightness(.9); }
/* a crowded tree's friends (tree.js crowdLayout): bright little baubles spread over the whole tree */
.xm-bauble.is-back.is-crowd { --bw: calc(var(--cq, 1cqw) * 9.5); opacity: 1; filter: none; }
.xm-bauble.is-gold .xm-bauble-glass { --b1: #FFE07A; --b2: #C99A12; box-shadow: inset -4px -6px 0 rgba(0,0,0,.1), 0 0 22px rgba(255,211,77,.95); }
.xm-bauble.is-gold .xm-bauble-name { color: #fff; -webkit-text-stroke-color: rgba(120,70,0,.75); }
/* phase 7: the other friends' baubles during the climb (quieter than the friend's own), and the top hook's crown */
.xm-bauble.is-rival { --bw: calc(var(--cq, 1cqw) * 10); opacity: .78; }
/* the top hook's crown, worn at a tilt on the glass's shoulder (never under the star) */
.xm-bauble.is-hook .xm-bauble-glass::after { content: '👑'; position: absolute; right: -14%; top: -8%; rotate: 22deg;
  font-size: calc(var(--cq, 1cqw) * 46); line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); z-index: 3; }   /* (cqw of the glass) */
/* a name tag that would cover another bauble on a crowded tree stays off (the list below names everyone) */
.xm-bauble.is-untagged .xm-bauble-tag { display: none; }
/* the tag worn above the bauble, where it would have hung behind a character (tree.js frameBall) */
.xm-bauble.is-tag-up .xm-bauble-tag { top: auto; bottom: calc(100% + var(--bw) * .06); transform: translate(-50%, 0); }
.xm-bauble.is-boxed:not(.is-spot) .xm-bauble-tag { display: none; }   /* in the box the tag would poke out of the cardboard */
.xm-bauble.is-you .xm-bauble-glass { box-shadow: 0 0 0 3px #fff, 0 0 16px rgba(255,255,255,.8); }
/* the spotlight on the friend's own bauble (tree.js spotlight): the others fall into the dark, theirs grows and glows */
.xm-layer .xm-bauble { transition: left .85s cubic-bezier(.34,1.25,.5,1), top .85s cubic-bezier(.34,1.25,.5,1), scale .5s cubic-bezier(.3,1.4,.5,1), opacity .3s, filter .5s; }
.xm-layer.is-spotlight .xm-bauble:not(.is-you) { filter: brightness(.38) saturate(.6); }
.xm-bauble.is-you.is-spot { scale: 1.35; z-index: 8; opacity: 1; filter: none; }
.xm-bauble.is-you.is-spot.is-peek { translate: 22% -44%; }     /* risen out of the box, clear of the Elf beside it */
.xm-bauble.is-you.is-spot .xm-bauble-glass { animation: xm-spot 1s ease-in-out infinite alternate; }
.xm-bauble.is-you.is-spot.is-untagged .xm-bauble-tag { display: block; }
@keyframes xm-spot { from { box-shadow: 0 0 0 3px #fff, 0 0 18px 6px rgba(255,236,160,.75); } to { box-shadow: 0 0 0 4px #fff, 0 0 40px 16px rgba(255,236,160,1); } }
.xm-bauble.is-front { scale: 1.25; }
.xm-bauble.is-spin .xm-bauble-glass { animation: xm-spin 1.2s ease-in-out 2; }
@keyframes xm-spin { 50% { transform: rotateY(180deg) rotate(8deg); } }
.xm-bauble.is-peek { translate: 0 -34%; transition: translate .5s cubic-bezier(.3,1.4,.5,1); }
.xm-bauble[role="button"] { cursor: pointer; }
/* outside the tree: a big bauble (the invitation, the result, the answers sheet) */
.xm-bauble.is-big, .xm-bauble.is-sheet { position: relative; transform: none; z-index: 1; }
.xm-bauble.is-big { --bw: 116px; }
/* off the tree there is no green to reflect */
.xm-bauble.is-big, .xm-bauble.is-sheet { --env: rgba(84,190,120,0); }
/* the big bauble carries the whole name: on two lines at its spaces, sized by the longest word (tree.js) */
.xm-bauble.is-big .xm-bauble-name, .xm-bauble.is-wrap .xm-bauble-name { white-space: normal; text-align: center; line-height: 1; overflow-wrap: normal; word-break: keep-all; }
.xm-bauble.is-sheet { --bw: 64px; flex: none; }
.xm-bauble.is-big .xm-bauble-swing::before, .xm-bauble.is-sheet .xm-bauble-swing::before { height: 14px; }
.xm-bauble.is-blank .xm-bauble-name { visibility: hidden; }   /* no "?" on a bauble waiting for a name: plain glass (owner, 2026-10-26) */
/* the friend's invite: what they'll do, before they type their name */
.xm-invite-rule { margin: 2px 4px 10px; font-size: 15px; line-height: 1.35; color: var(--ink); }
.xm-ballrow { display: flex; justify-content: center; margin-top: -4px; }
/* the invite: the envelope on the snowy street; the bauble hangs from the panel's top edge */
.xm-hero.is-invite { height: auto; min-height: 0; padding: calc(64px + env(safe-area-inset-top)) 14px 34px; }
.xm-hero.is-invite .xm-envelope { position: relative; z-index: 3; }
.xm-hero.is-invite .xm-hero-glow { top: 38%; }
.is-invite .xm-play .xm-ballrow { margin-top: -66px; position: relative; z-index: 3; }
.is-invite .xm-play .xm-label { color: var(--ink); }

/* ── questions (the creator's gift tags, the friend's cards) ──────────────────────────────────────────────── */
.xm-progress { flex: 1; max-width: 160px; height: 10px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; }
.xm-progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .4s; }
.xm-qbox { display: flex; flex-direction: column; gap: 12px; }
.xm-gifttag { padding: 16px 16px 16px 40px; rotate: -1deg; border-radius: 10px 22px 22px 10px; }
.xm-gifttag-hole { position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--night); border: 2.5px solid var(--gold); }
.xm-qcard { padding: 14px 16px; }
.xm-q { font: 800 clamp(18px, 5.2vw, 21px)/1.25 var(--title); text-wrap: balance; }
/* minmax(0, …): a long word (Tamil "நடுத்தரமானவை") can't widen its column off the screen; it overflows its own
   card instead, where fitText sees it and shrinks it */
.xm-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.xm-opts.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xm-opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 10px; border: 3px solid #fff; border-radius: 18px; background: #fff; color: var(--ink);
  cursor: pointer; text-align: center; box-shadow: 0 5px 0 #C9BFAF, 0 10px 18px rgba(0,0,0,.2); transition: transform .18s, box-shadow .18s, border-color .2s; }
.xm-opt img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #F1EADF; }
.xm-opts.is-many .xm-opt img { aspect-ratio: 1; }
/* four answers on a short phone: a little less picture, so the tree keeps its room above them */
@media (max-height: 760px) { .xm-opts.is-grid .xm-opt img { aspect-ratio: 16 / 10; } }
.xm-opt-text { font: 800 15px/1.2 'Nunito', sans-serif; overflow-wrap: anywhere; }
.xm-opts.is-many .xm-opt-text { font-size: 13px; }
.xm-opt:active { transform: translateY(3px); box-shadow: 0 2px 0 #C9BFAF; }
.xm-opt.is-picked { transform: translateY(-6px) scale(1.03); border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgba(255,211,77,.75); }
.xm-opt.is-right { border-color: #3FA66B; box-shadow: 0 0 0 4px #3FA66B, 0 0 26px rgba(63,166,107,.8); }
/* the tick and the cross are drawn (not ✓/✗ characters, which every phone's symbol font set at its own height):
   dead centre in the circle on every device (owner, 2026-11-03) */
.xm-opt.is-right::after, .xm-opt.is-answer::after, .xm-opt.is-wrong::after { content: ''; position: absolute; top: -12px; right: -10px; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); background-position: center; background-repeat: no-repeat; background-size: 20px 20px; }
.xm-opt.is-right::after, .xm-opt.is-answer::after { background-color: #3FA66B;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.xm-opt.is-wrong { border-color: var(--red); box-shadow: 0 0 0 4px var(--red); animation: xm-shake .4s; transform: none; }
.xm-opt.is-wrong::after { background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.xm-opt.is-answer { border-color: #3FA66B; animation: xm-answer .9s ease-in-out 2; }
@keyframes xm-answer { 50% { box-shadow: 0 0 0 4px #3FA66B, 0 0 30px rgba(63,166,107,.9); } }
.xm-saving { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }

/* ── the creator's tree, the scoreboard ───────────────────────────────────────────────────────────────────── */
.xm-board-heading { margin-top: 12px; }
.xm-board { display: flex; flex-direction: column; gap: 8px; }
.xm-empty { padding: 8px 12px; }
.xm-row-friend { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 10px; border-radius: 16px; background: var(--paper); color: var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.xm-row-friend.is-you { box-shadow: 0 0 0 3px var(--gold), 0 4px 0 rgba(0,0,0,.18); }
.xm-rank { flex: none; width: 24px; text-align: center; font: 800 16px/1 var(--title); color: var(--muted); }
.xm-mini-bauble { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--outline);
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 22%), radial-gradient(circle, var(--b1) 45%, var(--b2)); }
.xm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.xm-row-main strong { font: 800 17px/1.3 var(--title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xm-zone { align-self: flex-start; padding: 3px 8px; border-radius: 99px; font: 800 12px/1.1 'Nunito', sans-serif; color: #fff; background: #8D7A6B; white-space: nowrap; }
/* a friend's row: the name on top; the zone and the score below; compact buttons that never squeeze the name */
.xm-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0; }   /* a long zone pill: the score goes under it, never under the buttons */
.xm-row-meta .xm-score { font-size: 15px; }
.xm-row-friend { gap: 8px; }
.xm-row-friend.is-tap { cursor: pointer; transition: transform .12s; }
.xm-row-friend.is-tap:active { transform: scale(.98); }
.xm-row-go { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #FFE7A0;
  color: var(--ink); font: 800 22px/1 var(--title); }
@media (max-width: 374px) {
  .xm-row-friend { padding: 8px 6px 8px 8px; gap: 6px; }
  .xm-rank { width: 16px; font-size: 14px; }
  .xm-mini-bauble { width: 22px; height: 22px; }
  .xm-row-go { width: 26px; height: 26px; font-size: 19px; }
  .xm-row-remove { width: 24px; }
}
.xm-zone.is-top { background: #C99A12; } .xm-zone.is-front { background: #2E8B57; } .xm-zone.is-bottom { background: #2B5AA6; }
.xm-score { flex: none; font: 800 17px/1 var(--title); color: var(--red-d); }
.xm-row-see { flex: none; min-height: 38px; padding: 0 10px; border: 0; border-radius: 12px; background: #FFE7A0; color: var(--ink); font: 800 13px/1 'Nunito', sans-serif; cursor: pointer; }
.xm-row-remove { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: 800 22px/1 var(--title); cursor: pointer; }
.xm-row-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.3); font-weight: 800; }
.xm-row-confirm span { flex: 1 1 100%; }
/* on the cream panel: the confirm is warm paper with a gold edge (the night theme's dark glass looked muddy here) */
.xm-play .xm-row-confirm { background: #FFF1D6; border: 2px solid #F1D9AE; color: var(--ink); box-shadow: 0 3px 0 #EEDCBC; }
.xm-row { display: flex; gap: 10px; }
.xm-row > .xm-btn { flex: 1; font-size: 18px; min-height: 52px; }
.xm-delete { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.xm-delete .xm-link { color: #8F9BC0; font-size: 14px; }
.xm-play .xm-delete .xm-link { color: #8A7466; }      /* readable on the cream panel, still quiet */
/* the two answers share the whole width, so "Take it down" / "Stehen lassen" stay on one line on a 320 px phone */
.xm-delete .xm-row { align-self: stretch; }
.xm-delete .xm-row > .xm-btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 16px; }

/* the answers sheet (the creator only) */
.xm-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(10,14,32,.6); }
.xm-sheet-panel { width: 100%; max-width: 480px; max-height: 88vh; overflow: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
  background: var(--paper); color: var(--ink); }
.xm-sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.xm-sheet-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.xm-sheet-head .xm-h2 { font-size: clamp(19px, 5.6vw, 24px); overflow-wrap: anywhere; }
.xm-sheet-head .xm-name { white-space: normal; display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }   /* wrapped: a scribble per line, no gap before "'s" */
.xm-sheet .xm-name { color: var(--red-d); }
.xm-sheet-close { flex: none; align-self: flex-start; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #EFE6D6; color: var(--ink); font: 800 24px/1 var(--title); cursor: pointer; }
/* the landing's language switch (Bail Me Out's / Don't Block Me's): globe · this language · round arrow; a tap opens the
   drawer with every language in its own name */
.xm-langfield { display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; margin: 0; padding: 0 6px 0 14px; border-radius: 18px;
  background: #fff; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 rgba(35,34,43,.3); color: var(--ink); cursor: pointer; text-align: start;
  font: 800 17px/1.1 var(--title); -webkit-tap-highlight-color: transparent; }
.xm-langfield:active { translate: 0 2px; box-shadow: 0 1px 0 rgba(35,34,43,.3); }
.xm-langfield:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.xm-langfield-globe { flex: none; font-size: 22px; line-height: 1; }
/* a line tall enough for नेपाली and 日本語 (the ellipsis needs the clipping box) */
.xm-langfield b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.6; padding-top: 1px; }
.xm-langfield-arrow { flex: none; position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--red); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.xm-langfield-arrow::after { content: ''; position: absolute; left: 50%; top: 44%; width: 9px; height: 9px; border: solid #fff; border-width: 0 3px 3px 0; border-radius: 1px;
  translate: -50% -50%; rotate: 45deg; }
.xm-sheet-panel.is-langs .xm-sheet-head { align-items: center; }
.xm-langlist { display: flex; flex-direction: column; }
.xm-langlist a { display: block; padding: 13px 12px; border-bottom: 1px solid #EFE6D6; border-radius: 12px; text-align: center; text-decoration: none; color: var(--ink);
  font: 800 18px/1.25 var(--title); }
.xm-langlist a:last-child { border-bottom: 0; }
.xm-langlist a:is(:lang(ar), :lang(th)) { font-size: 21px; }   /* the phone's own font for these runs small */
.xm-langlist a:active, .xm-langlist a:focus-visible { background: #F4EEE3; outline: none; }
.xm-langlist a.is-now { background: #FFE3E1; color: var(--red-d); }
.xm-langlist a.is-now::after { content: ' ✓'; }
/* a drawer's grab handle, as a phone's own sheets */
.xm-sheet-panel::before { content: ''; display: block; width: 44px; height: 5px; margin: -6px auto 12px; border-radius: 3px; background: #DCCFB8; }
.xm-answers { display: flex; flex-direction: column; gap: 14px; }
/* each answer a card: the question, then the pictures (the creator's own cat or bear) with who chose them */
.xm-answer { padding: 12px 12px 14px; border-radius: 20px; background: #fff; border: 2px solid #F1E2C8; box-shadow: 0 4px 0 #EEDCBC, 0 8px 16px rgba(120,80,30,.1);
  display: flex; flex-direction: column; gap: 12px; }
.xm-answer-q { display: flex; align-items: flex-start; gap: 9px; font: 800 16px/1.25 var(--title); }
.xm-answer-q > span:last-child { min-width: 0; padding-top: 2px; }
.xm-answer-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--ink); text-align: center; font: 800 14px/26px var(--title);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.xm-answer-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.xm-pick { position: relative; margin: 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.xm-pick-pic { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #F4EEE3; border: 3px solid #fff;
  box-shadow: 0 0 0 2.5px var(--pick), 0 5px 12px rgba(120,80,30,.16); }
.xm-pick-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xm-pick.is-right { --pick: #3FA66B; } .xm-pick.is-wrong { --pick: var(--red); }
.xm-pick.is-wrong .xm-pick-pic img { filter: saturate(.75); }
.xm-pick-mark { position: absolute; top: -8px; inset-inline-end: -8px; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fff; background: var(--pick);
  color: #fff; text-align: center; font: 800 17px/25px var(--title); box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.xm-pick figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.xm-pick-text { font-weight: 800; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.xm-answer-who { max-width: 100%; padding: 3px 9px; border-radius: 99px; background: #F4EEE3; font-size: 12px; font-weight: 800; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }   /* a Latin name in Arabic: "QA Bartho…", not "…artholomew" */
.xm-pick.is-right .xm-answer-who { background: #E3F4EA; color: #23704A; }
/* the same answer: its picture once, both of them beside it */
.xm-answer.is-right { border-color: #BFE5CD; background: linear-gradient(180deg, #fff 60%, #F1FAF4); }
.xm-match { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; align-self: center; }
.xm-match-who { display: flex; flex-wrap: wrap; gap: 5px; }
.xm-match .xm-answer-who { background: #E3F4EA; color: #23704A; }
.xm-match .xm-pick-text { font-size: 15px; }
.xm-dots.xm-center { justify-content: center; padding: 14px 0; }

/* ── 2.1 the invitation: the envelope and the card ────────────────────────────────────────────────────────── */
.xm-envelope { position: relative; padding: 0 12px 74px; overflow: hidden; border-radius: 0 0 18px 18px; }
.xm-envelope-back { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; border-radius: 14px; background: linear-gradient(#B42B29, #8E1F1D); border: 3px solid #3B2A26; }
.xm-envelope-front { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 92px; border-radius: 0 0 14px 14px; background: linear-gradient(#EF5450, #D23430);
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); border: 3px solid #3B2A26; }
.xm-envelope-seal { position: absolute; z-index: 3; left: 50%; bottom: 30px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE7A0, #C99A12); border: 3px solid #3B2A26; transition: transform .4s cubic-bezier(.5,-0.6,.7,1), opacity .4s; }
.xm-envelope-seal::after { content: '✦'; position: absolute; inset: 0; color: #8A5A10; font-size: 22px; line-height: 40px; text-align: center; }
.xm-xcard { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 14px 18px; border-radius: 18px;
  background: var(--paper); color: var(--ink); border: 3px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .9s cubic-bezier(.2,1.1,.3,1); }
.xm-xcard .xm-h2 { font-size: 24px; }
.xm-xcard .xm-name { color: var(--red-d); }
.xm-envelope.is-sealed .xm-xcard { transform: translateY(72%); }
.xm-envelope.is-open .xm-envelope-seal { transform: scale(0) rotate(120deg); opacity: 0; }
.xm-polaroid { padding: 8px 8px 0; background: #fff; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.25); rotate: -3deg; text-align: center; }
.xm-polaroid-pic { position: relative; width: 190px; height: 128px; overflow: hidden; border-radius: 3px; background: radial-gradient(circle at 70% 30%, #FFE7BE, #E9A86A); }
.xm-polaroid-tree { position: absolute; left: 6px; bottom: -4px; height: 132px; width: auto; }
.xm-polaroid-host { position: absolute !important; right: 4px; bottom: 0; }
.xm-polaroid-name { display: block; padding: 6px 4px 8px; font: 800 17px/1 var(--hand); color: var(--ink); }
.xm-sticker { padding: 7px 14px; border-radius: 12px; background: var(--gold); color: var(--ink); font: 800 15px/1.25 'Nunito', sans-serif; text-align: center;
  rotate: 2deg; border: 2.5px solid var(--outline); box-shadow: 0 3px 0 rgba(0,0,0,.2); }
/* who is on the tree already (phase 7), under the mood sticker; the room under it keeps it clear of the snow strip
   that overlaps the bottom of the tag (it hid the second line on short phones) */
.xm-proof { margin: 8px 0 26px; font: 800 14px/1.3 'Nunito', sans-serif; color: var(--ink); text-align: center; text-wrap: balance; }
.xm-proof-line { display: block; }

/* ── the endings' result card (on the night window) ───────────────────────────────────────────────────────── */
.xm-endcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; padding: 22px 16px 20px; border-radius: 22px;
  border: 8px solid #6A3E2A; background: radial-gradient(circle at 50% 0, #34508A, #1F2B4D 70%); box-shadow: 0 0 0 3px #3B2A26, 0 16px 34px rgba(0,0,0,.4); }
.xm-endcard.is-top { box-shadow: 0 0 0 3px #3B2A26, 0 0 40px rgba(255,211,77,.55); }
.xm-endcard .xm-h1 { color: var(--gold); font-size: clamp(32px, 9.5vw, 42px); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.xm-endcard-ball { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin-top: -8px; }
.xm-endcard-ball .xm-bauble.is-big { --bw: 104px; align-self: flex-start; }
.xm-endcard-side { width: 84px; height: auto; filter: drop-shadow(0 5px 5px rgba(0,0,0,.3)); }
.xm-endcard-side.is-box { width: 92px; }
.xm-endcard-score { margin: 0; font: 800 18px/1.35 'Nunito', sans-serif; text-align: center; }
.xm-perfect { padding: 6px 14px; border-radius: 99px; background: var(--gold); color: var(--ink); font: 800 16px/1 var(--title); box-shadow: 0 0 18px rgba(255,211,77,.8); }
.xm-perfect.is-hook { background: #C8262C; color: #fff; box-shadow: 0 0 18px rgba(200,38,44,.55); }
/* the named comeback over the "decorate your own tree" button (phase 7) */
.xm-comeback { margin: 4px 0 -4px; font: 800 16px/1.3 'Nunito', sans-serif; color: var(--ink); text-align: center; text-wrap: balance; }
.xm-zone.is-hook { background: #C8262C; }
.xm-actions { display: flex; flex-direction: column; gap: 12px; }
.xm-actions > .xm-btn.is-ghost { margin-top: 2px; }

/* ── a tree taken down ────────────────────────────────────────────────────────────────────────────────────── */
.xm-closed-scene { position: relative; height: clamp(240px, 42vh, 340px); margin-top: 20px; }
.xm-closed-tree { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; transform: translateX(-56%); opacity: .85; filter: saturate(.6); }
.xm-closed-elf { position: absolute; right: 8%; bottom: 0; width: 84px; }
.is-closed .xm-btn { font-size: clamp(15px, 4.8vw, 19px); white-space: nowrap; }   /* one line on a 320 px phone */

@media (prefers-reduced-motion: reduce) {
  .xm-layer, .xm-bauble, .xm-box-lid { transition: none; }
  .xm-bauble .xm-bauble-swing, .xm-bauble .xm-bauble-twig { animation: none !important; }
  .is-on .xm-glow, .is-star .xm-star-glow, .xm-flame { animation: none; }
  .xm-puppy.is-trot { animation: none; transform: translateX(126px); }
  .xm-bauble.is-you.is-spot .xm-bauble-glass { animation: none; box-shadow: 0 0 0 4px #fff, 0 0 30px 12px rgba(255,236,160,.9); }
}

/* ══ the gift game's own pieces ════════════════════════════════════════════════════════════════════════════ */

/* ── 1.1 the landing: the title's bow, the parcel in the snow ──────────────────────────────────────────────── */
.xm-logo-main { position: relative; }
.xm-title-bow { position: absolute; right: -6px; top: -10px; width: 34px; height: 34px; opacity: 0; transform: scale(.2) rotate(-40deg);
  transition: opacity .35s, transform .55s cubic-bezier(.2,1.5,.4,1); }
.xm-title-bow::before { content: '\1F380'; font-size: 30px; line-height: 34px; -webkit-text-stroke: 0; }
.xm-title-bow.is-tied { opacity: 1; transform: none; }
.xm-hero-parcel { position: absolute; z-index: 3; left: 8%; bottom: 40px; width: 24%; height: auto; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); rotate: -6deg; }

/* ── 1.2 / 1.4 the wish list on the desk ───────────────────────────────────────────────────────────────────── */
.xm-desk { position: relative; flex: none; height: 46vh; height: 46dvh; min-height: 300px; overflow: hidden; }
.xm-desk-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* sized by the desk's height (a short phone keeps the whole paper, its name at the top, in view) */
.xm-list-paper { position: absolute; z-index: 3; left: 50%; bottom: 6%; height: 78%; max-width: 60%; aspect-ratio: 285 / 480; transform: translateX(-50%) rotate(-3deg); }
.xm-list-pic { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.xm-list-name { position: absolute; left: 13%; right: 13%; top: 9%; overflow: hidden; color: var(--red-d); text-align: center; white-space: nowrap;
  font: 800 calc(clamp(15px, 4.8vw, 21px) * var(--fs, 1))/1.15 var(--hand); padding-bottom: .2em; }   /* the handwriting's tails (y, g, j) were clipped by the box */
.xm-list-name.is-paint { animation: xm-paint .35s ease-out; }
.xm-desk-elf { position: absolute !important; z-index: 4; right: 6%; bottom: 10%; }
.xm-desk .xm-say { z-index: 7; }
/* the wish list while answering: the paper big on the desk, each answer pinned on it as a sticker with a tick */
.xm-cam.is-desk-stage { background: #3A2742; }
.is-climb .xm-cam.is-desk-stage { min-height: clamp(230px, 40vh, 360px); min-height: clamp(230px, 40dvh, 360px); }
.xm-cam.is-desk-stage .xm-desk-bg { object-position: 50% 70%; }
.xm-list-paper.is-desk { bottom: 5%; height: 88%; left: 42%; }
.xm-list-stickers { position: absolute; left: 15%; right: 15%; top: 20%; bottom: 10%; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 18%; gap: 2% 8%; }
.xm-list-sticker { position: relative; display: block; border: 3px solid #fff; border-radius: 6px; rotate: var(--r, 0deg); box-shadow: 0 3px 6px rgba(0,0,0,.25); background: #fff; }
.xm-list-sticker img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.xm-list-tick { position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: #3FA66B; border: 2px solid #fff; color: #fff;
  font: 900 12px/16px 'Nunito', sans-serif; font-style: normal; text-align: center; box-shadow: 0 2px 3px rgba(0,0,0,.3); }
.xm-desk-host { position: absolute !important; z-index: 5; right: 2%; bottom: 26px; }

/* ── 1.5 the empty spot: golden "From: ?" tags on the rug under the tree ───────────────────────────────────── */
.xm-floor-tag { position: absolute; z-index: 3; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--cq, 1cqw) * .8) calc(var(--cq, 1cqw) * 1.4); border-radius: calc(var(--cq, 1cqw) * 1.6);
  background: linear-gradient(#FFE7A0, #F2BF26); border: calc(var(--cq, 1cqw) * .5) solid var(--outline); box-shadow: 0 3px 4px rgba(0,0,0,.3); rotate: -8deg; }
.xm-floor-tag:nth-child(even) { rotate: 7deg; }
.xm-floor-tag i { font: 800 calc(var(--cq, 1cqw) * 2.6)/1 var(--hand); font-style: normal; color: #7A4A08; }
.xm-floor-tag b { font: 800 calc(var(--cq, 1cqw) * 4.4)/1 var(--title); color: var(--red-d); }

/* ── the presents (a friend's gift: its paper is their ending; their name on a little tag) ─────────────────── */
.xm-present { position: absolute; z-index: 4; width: calc(var(--cq, 1cqw) * 21); transform: translate(-50%, -100%); transform-origin: 50% 100%; }
.xm-present.is-row1 { z-index: 3; width: calc(var(--cq, 1cqw) * 17); }
.xm-present.is-row2 { z-index: 2; width: calc(var(--cq, 1cqw) * 14); }
.xm-present.is-best { z-index: 5; width: calc(var(--cq, 1cqw) * 27); }
.xm-present-swing { position: relative; display: block; transform-origin: 50% 100%; }
.xm-present-pic { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 4px rgba(0,0,0,.35)); }
/* a long name wraps onto a second line inside the tag's width (it used to end in "…": "QA Christ…") */
.xm-present-tag { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%) rotate(-4deg); width: max-content; max-width: 130%; min-width: min-content; padding: 1px 6px 2px; border-radius: 5px;
  background: var(--paper); border: 2px solid var(--outline); color: var(--ink); text-align: center;
  font: 800 calc(var(--cq, 1cqw) * 3.4)/1.15 var(--hand); box-shadow: 0 2px 2px rgba(0,0,0,.25); }
.xm-present.is-row2 .xm-present-tag { display: none; }
/* the pile under the tree: the rows behind show no tag (except your own; the list has every name), the front row's
   tags fit the gap between presents and the best gift's keeps its full width */
.xm-present.is-row1:not(.is-you) .xm-present-tag { display: none; }
.xm-present.is-row0:not(.is-best) .xm-present-tag { max-width: 112%; font-size: calc(var(--cq, 1cqw) * 3); }
.xm-present.is-low-tag .xm-present-tag { bottom: -20%; }   /* staggered: neighbouring names never overlap */
.xm-present.is-row0:not(.is-low-tag):not(.is-best) .xm-present-tag { bottom: 14%; }   /* …and the others hang a step higher, on the box */
.xm-present.is-row0.is-best:not(.is-low-tag) .xm-present-tag { bottom: 30%; }   /* the best one too: it overlapped both low names */
.xm-present.is-row0:not(.is-low-tag) { z-index: 5; }   /* a name on the box: that box in front of its neighbours (their names hang below) */
.xm-present.is-best .xm-present-swing::before { content: '\1F451'; position: absolute; z-index: 1; left: 58%; top: -22%; transform: translateX(-50%) rotate(14deg);
  font-size: calc(var(--cq, 1cqw) * 11); line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.xm-present.is-gold .xm-present-pic, .xm-present.is-perfect .xm-present-pic { filter: drop-shadow(0 0 10px rgba(255,211,77,.9)) drop-shadow(0 5px 4px rgba(0,0,0,.3)); }
.xm-present.is-arrive { animation: xm-present-in .6s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes xm-present-in { from { opacity: 0; transform: translate(-50%, -100%) translateY(-60%) scale(.4) rotate(-20deg); } }
.xm-layer.is-spotlight .xm-present:not(.is-spot) { opacity: .35; filter: brightness(.6); transition: opacity .5s, filter .5s; }
.xm-present.is-spot { z-index: 9; animation: xm-present-spot 1.1s ease-in-out infinite alternate; }
@keyframes xm-present-spot { from { transform: translate(-50%, -100%) scale(1.25); filter: drop-shadow(0 0 0 rgba(255,236,160,0)); }
  to { transform: translate(-50%, -100%) scale(1.35); filter: drop-shadow(0 0 16px rgba(255,236,160,.95)); } }
.xm-present.is-you .xm-present-tag { background: var(--gold); }
.xm-mini-present { flex: none; width: 34px; height: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.xm-sheet-present { flex: none; width: 56px; height: auto; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.is-reveal .xm-cam.is-stage { background: #3A2742; }

/* ── 2.1 the invitation: a big gift tag, "To: {creator}" on the front, "From: ___" on the back ──────────────── */
.xm-bigtag { position: relative; z-index: 3; margin: 0 auto; width: min(100%, 360px); perspective: 900px; }
.xm-bigtag-string { position: absolute; left: 50%; top: -40px; width: 3px; height: 50px; margin-left: -1.5px; background: #B42B29; border-radius: 2px; }
.xm-bigtag-inner { position: relative; display: grid; transition: transform .7s cubic-bezier(.3,1.2,.4,1); transform-style: preserve-3d; }
.xm-bigtag.is-flipped .xm-bigtag-inner { transform: rotateY(180deg); }
.xm-tag-face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 14px 18px; border-radius: 22px 22px 18px 18px;
  background: var(--paper); color: var(--ink); border: 3px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.xm-tag-face::before { content: ''; position: absolute; left: 50%; top: 8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #3A2742; box-shadow: inset 0 0 0 3px #C99A12; }
.xm-tag-face.is-back { transform: rotateY(180deg); justify-content: center; background: linear-gradient(#FFF4D2, #FFE7A0); }
.xm-tag-face .xm-h2 { font-size: 24px; }
.xm-tag-face .xm-name { color: var(--red-d); }
.xm-tag-to { font: 800 22px/1.1 var(--hand); color: var(--red-d); }
.xm-tag-from { font: 800 26px/1 var(--hand); color: #7A4A08; }
.xm-tag-from-name { min-height: 1.2em; font: 800 clamp(30px, 10vw, 44px)/1.1 var(--hand); color: var(--red-d); text-align: center; overflow-wrap: anywhere; }
.xm-tag-from-name.is-paint { animation: xm-paint .35s ease-out; }
.xm-hero.is-invite .xm-bigtag { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .xm-bigtag-inner { transition: none; } }

/* ── 2.2–2.3 the market: the painting pans, the Elf behind the counter, the box on the snow ────────────────── */
.xm-cam.is-market { background: #1F2B4D; container-type: size; }
.is-climb .xm-cam.is-market { min-height: clamp(260px, 44vh, 400px); min-height: clamp(260px, 44dvh, 400px); }
.xm-market-pan { position: absolute; inset: 0; }
.xm-market-pic { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; transition: object-position 1.1s cubic-bezier(.45,0,.2,1); }
.xm-market-dim { position: absolute; inset: 0; z-index: 1; background: #0B0F24; opacity: 0; transition: opacity .8s; pointer-events: none; }
.xm-cam.is-market.is-dim .xm-market-dim { opacity: .55; }
/* the counter is 74% of the stage wide (its picture 480 × 244): its top is 22px + 37.6cqw up; the Elf stands behind
   it, his upper half above it */
.xm-market-counter { position: absolute; z-index: 4; right: -6%; bottom: 22px; width: 74%; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.xm-market-elf { position: absolute !important; z-index: 3; right: 18%; bottom: calc(22px + 24cqw); }
.xm-present.is-shop { left: 20%; top: auto; bottom: 26px; width: 30%; max-width: 140px; transform: translateX(-50%); z-index: 5; }
.xm-present.is-shop.is-whirl .xm-present-swing { animation: xm-whirl .7s cubic-bezier(.3,1.2,.4,1); }
@keyframes xm-whirl { 0% { transform: none; } 35% { transform: rotate(-200deg) scale(.6); filter: brightness(1.8); } 70% { transform: rotate(20deg) scale(1.15); } 100% { transform: none; } }
.xm-drop { position: absolute; z-index: 6; width: 64px; height: auto; transform: translate(-50%, -50%); pointer-events: none; animation: xm-drop .7s cubic-bezier(.5,0,.8,.6) forwards;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.xm-drop.is-silly { width: 70px; animation-name: xm-drop-silly; }
@keyframes xm-drop { 0% { opacity: 0; transform: translate(-50%, -260%) scale(.6) rotate(-30deg); } 25% { opacity: 1; } 80% { opacity: 1; transform: translate(-50%, -40%) scale(.8); }
  100% { opacity: 0; transform: translate(-50%, 0) scale(.3); } }
@keyframes xm-drop-silly { 0% { opacity: 0; transform: translate(180%, -320%) scale(.7) rotate(60deg); } 20% { opacity: 1; } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-15deg); }
  100% { opacity: 0; transform: translate(-50%, -10%) scale(.4) rotate(10deg); } }
.xm-badge { position: absolute; z-index: 8; left: 10px; top: calc(54px + env(safe-area-inset-top)); width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #FFE7BE, #E9A86A); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--outline), 0 6px 12px rgba(0,0,0,.35); }
.xm-badge-pic { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); }
.xm-badge-host img.is-art { animation: none; }
.xm-tagbar { position: absolute; z-index: 8; left: 86px; right: 10px; top: calc(62px + env(safe-area-inset-top)); display: flex; gap: 4px; pointer-events: none; }
.xm-tagbar i { position: relative; flex: 1; max-width: 26px; aspect-ratio: 3 / 4; border-radius: 4px 4px 6px 6px; background: rgba(255,248,236,.25); border: 2px solid rgba(255,255,255,.55);
  transition: background .35s, border-color .35s, transform .35s; }
.xm-tagbar i::after { content: ''; position: absolute; left: 50%; top: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: rgba(0,0,0,.35); }
.xm-tagbar i.is-right { background: linear-gradient(#FFE7A0, #F2BF26); border-color: #fff; box-shadow: 0 0 8px rgba(255,211,77,.8); transform: rotate(-6deg); }
.xm-tagbar i.is-wrong { background: #8D7A6B; border-color: rgba(255,255,255,.6); }
.xm-tagbar i.is-wrong::before { content: '\1F9E6'; position: absolute; inset: 0; font-size: 12px; line-height: 2.2; text-align: center; }
.xm-market-host { position: absolute !important; z-index: 6; left: 36%; bottom: 26px; }
.xm-cam.is-market .xm-say { z-index: 11; }

/* ── 3 Christmas morning: the room in sunrise light, the gift on the rug ───────────────────────────────────── */
.xm-scene.is-morning-film { padding: 0; gap: 0; background: #F3D7A8; }
.is-morning-film .xm-cam.is-morning { flex: none; height: 100vh; height: 100dvh; min-height: 460px; }
.is-result .xm-cam.is-morning { flex: none; height: 64vh; height: 64dvh; min-height: 400px; }
.xm-cam.is-morning { background: #F3D7A8; }
.xm-morning-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 100%; }
/* the wall's garland and framed photo hang at a height of the painting (768 × 1376, covering the stage from its
   bottom): a point y of the painting sits (1 − y) × max(179.2cqw, 100cqh) above the stage's bottom */
.xm-cam.is-morning { container-type: size; }
.xm-morning-wall { position: absolute; z-index: 1; left: 0; right: 0; height: 0; bottom: calc(.66 * max(179.2cqw, 100cqh)); pointer-events: none; }
.xm-morning-garland { position: absolute; top: 0; width: 56%; height: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.xm-morning-garland.is-left { left: -3%; transform: rotate(9deg); transform-origin: 0 50%; }
.xm-morning-garland.is-right { left: auto; right: -3%; transform: rotate(-9deg) translateX(-100%) scaleX(-1); transform-origin: 100% 50%; }   /* mirrored in place, then swung down from its outer end */
.xm-morning-frame { position: absolute; left: 50%; top: calc(16cqw + 10px); width: 30cqw; max-width: 150px; aspect-ratio: 4 / 5; overflow: hidden;
  transform: translateX(-50%) rotate(-3deg); border-radius: 4px; border: 6px solid #B9783A; outline: 2px solid #6B3F1C;
  background: radial-gradient(circle at 50% 35%, #FFF3D6, #E9B97A); box-shadow: 0 8px 14px rgba(0,0,0,.28), inset 0 0 0 3px #F6E2B8; }
/* the film's full-height stage shows more wall: everything hangs a little higher and the photo a little bigger */
.is-morning-film .xm-morning-wall { bottom: calc(.7 * max(179.2cqw, 100cqh)); }
.is-morning-film .xm-morning-frame { width: 34cqw; max-width: 170px; }
/* the result's stage is shorter and its title ribbon hangs over the wall: the photo smaller, always under the ribbon
   (at least 165px from the stage's top) */
.is-final .xm-morning-frame { width: 24cqw; top: max(16cqw + 44px, 165px - (100cqh - .66 * max(179.2cqw, 100cqh))); }
.xm-morning-photo { position: absolute !important; left: 50%; top: 10%; transform: translateX(-50%); }
.xm-morning-photo img.is-art { animation: none; filter: none; }
.xm-morning-sun { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 50% at 25% 30%, rgba(255,236,170,.45), rgba(255,236,170,0) 70%); mix-blend-mode: screen; }
/* the gift between the Elf (left) and the host (right), a little in front of both */
.xm-morning-gift, .xm-morning-light { position: absolute; z-index: 6; left: 44%; bottom: 30px; width: 30%; max-width: 150px; transform: translateX(-50%); }
/* the box's light: the gift's twin spot behind the cast (over the room and its wall only), so the rays frame the
   characters and the gift instead of washing over them (owner, 2026-11-03); its invisible box copy gives the height */
.xm-morning-light { z-index: 2; pointer-events: none; }
.xm-morning-light-box { display: block; width: 100%; height: auto; visibility: hidden; }
.xm-morning-light.is-on .xm-reveal-rays { opacity: 1; transform: scale(1); }
/* behind the cast they fall on the cream wall: a warmer, stronger gold so the burst still reads */
.xm-morning-light .xm-reveal-rays { background: repeating-conic-gradient(rgba(255,196,80,.62) 0 9deg, rgba(255,196,80,0) 9deg 22deg); }
.xm-present.is-morning { position: relative; left: auto; top: auto; width: 100%; transform: none; }
.xm-present.is-morning.is-open .xm-present-pic { opacity: 0; transition: opacity .25s .1s; }
.xm-morning-thing { position: absolute; left: 50%; bottom: 0; width: 78%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.xm-morning-thing.is-glow { width: 115%; filter: drop-shadow(0 0 18px rgba(255,211,77,.9)); }
/* the scarf or the sweater flies from the box onto the host (who now wears it) */
.xm-morning-thing.is-worn { opacity: 0; transform: translate(60%, -90%) scale(.5) rotate(20deg); transition: opacity .45s, transform .45s ease-in; }
/* the coal (and the candy it turns into) is a small lump, held up in the host's paw in the art */
.xm-morning-thing[data-art^="gf-gift-c"] { width: 46%; }
.xm-present-tag.is-from { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) rotate(-3deg); font-size: 14px; max-width: 190px; z-index: 2; }
/* on the morning rug: "From:" small on top, the name under it, so the tag is only a name wide (a long name used to run
   under the host's name tag beside the gift) */
.xm-present-tag.is-stacked { font-size: 13px; line-height: 1.05; max-width: min(136px, 40vw); padding: 2px 7px 3px; overflow-wrap: anywhere; }
.xm-from-word { display: block; font-size: .78em; opacity: .75; }
.xm-from-name { display: block; }
/* the smallest phones: the host's name tag comes closer, so the tag leans toward the Elf's side (he has no name tag) */
@media (max-width: 340px) { .xm-present-tag.is-stacked { transform: translateX(-66%) rotate(-3deg); } }
.xm-morning-host { position: absolute !important; z-index: 5; right: -2%; bottom: 26px; }
.xm-morning-elf { position: absolute !important; z-index: 3; left: -3%; bottom: 30px; }
.xm-cam.is-morning .xm-say { z-index: 11; }
.xm-cam.is-morning .xm-ribbon.is-title { top: calc(58px + env(safe-area-inset-top)); }
.xm-cam.is-morning.is-final .xm-morning-gift, .xm-cam.is-morning.is-final .xm-morning-light { bottom: 64px; }   /* its "From:" tag clear of the panel's snowy edge */

/* ── the film pass: bars, title cards, whips, a living market, Christmas morning at dawn ───────────────────── */
/* the black bars close in for the beats nobody taps (the opening shot, the cocoa break, the last question, the morning) */
.xm-cam.is-stage::before, .xm-cam.is-stage::after { content: ''; position: absolute; z-index: 9; left: 0; right: 0; height: min(8%, 54px); background: #05060C;
  pointer-events: none; transition: transform .7s cubic-bezier(.3,0,.2,1); }
.xm-cam.is-stage::before { top: 0; transform: translateY(-101%); }
.xm-cam.is-stage::after { bottom: 0; transform: translateY(101%); }
.xm-cam.is-stage.is-bars::before, .xm-cam.is-stage.is-bars::after { transform: none; }
/* a title card in the lower bar, film-subtitle style */
.xm-film-card { position: absolute; z-index: 12; left: 0; right: 0; bottom: min(8%, 54px); padding: 40px 18px 14px; text-align: center; pointer-events: none;
  background: linear-gradient(rgba(5,6,12,0), rgba(5,6,12,.72) 55%, rgba(5,6,12,.85));   /* a soft dark band rising from the bar */
  font-family: var(--title, inherit); font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; color: #FFF6E2; text-shadow: 0 2px 10px rgba(0,0,0,.8), 0 0 2px #000;
  opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .6s cubic-bezier(.2,.8,.3,1); }
.xm-film-card.is-in { opacity: 1; transform: none; }
/* the whip between the acts: a bright blurred sweep across the phone */
.xm-whip { position: fixed; z-index: 9999; inset: 0 -60%; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 9px, rgba(255,255,255,.35) 9px 11px),
    linear-gradient(90deg, rgba(255,246,226,0), rgba(255,246,226,.97) 32%, #FFF1D6 50%, rgba(255,246,226,.97) 68%, rgba(255,246,226,0));
  filter: blur(6px); animation: xm-whip .58s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes xm-whip { from { transform: translateX(-100%) skewX(-12deg); } to { transform: translateX(100%) skewX(-12deg); } }
/* the market's world (the camera pushes into it); its air: snow and out-of-focus string lights close to the lens */
.xm-market-world { position: absolute; inset: 0; transition: scale .55s cubic-bezier(.3,0,.2,1); }
.xm-market-air { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.xm-market-air .xm-snow { z-index: 0; }
.xm-bokeh { position: absolute; width: var(--size); height: var(--size); border-radius: 50%; background: radial-gradient(circle, var(--hue), rgba(255,255,255,0) 70%);
  filter: blur(2px); mix-blend-mode: screen; opacity: .25; animation: xm-bokeh-twinkle 3.4s ease-in-out infinite alternate; }
/* its own name: as "xm-twinkle" it replaced the garland's and the night sky's twinkle (core.css) on this page */
@keyframes xm-bokeh-twinkle { 0% { opacity: .12; transform: scale(.85); } 60% { opacity: .55; } 100% { opacity: .3; transform: scale(1.1) translateY(-6px); } }
/* three right in a row: the stall's lights flash */
.xm-cam.is-market.is-flash .xm-market-pan { animation: xm-stall-flash .9s ease-out; }
@keyframes xm-stall-flash { 0%, 100% { filter: none; } 20%, 60% { filter: brightness(1.45) saturate(1.3); } 40% { filter: brightness(1.05); } }
/* the picked card lifts and glows over the drum roll; then it flies into the box (a fixed copy) */
.xm-opt.is-lift { animation: xm-lift .56s ease-in-out; }
@keyframes xm-lift { 0% { transform: translateY(-6px) scale(1.03); } 50% { transform: translateY(-12px) scale(1.07); box-shadow: 0 0 0 4px var(--gold), 0 0 40px rgba(255,211,77,.95); } 100% { transform: translateY(-8px) scale(1.04); } }
.xm-fly { position: fixed; z-index: 60; object-fit: cover; pointer-events: none; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .xm-bokeh { animation: none; } .xm-opt.is-lift { animation: none; } }
/* Christmas morning at dawn: the room starts in blue darkness and the sun comes up */
.xm-cam.is-morning::before, .xm-cam.is-morning::after { z-index: 13; }
.xm-morning-sun { transition: opacity 1.8s ease-out; }
.xm-cam.is-morning > .xm-morning-bg { transition: filter 1.8s ease-out; }
.xm-cam.is-morning.is-dawn > .xm-morning-bg { filter: brightness(.35) saturate(.6) hue-rotate(-12deg); }
.xm-cam.is-morning.is-dawn .xm-morning-sun { opacity: 0; }
.xm-cam.is-morning.is-dawn .xm-morning-wall, .xm-cam.is-morning.is-dawn .xm-morning-elf { filter: brightness(.4); }
.xm-morning-wall, .xm-morning-elf { transition: filter 1.8s ease-out; }
/* the perfect gift: a gold haze over the room, the right answers floating up in an arc */
.xm-cam.is-morning.is-golden .xm-morning-sun { background: radial-gradient(70% 55% at 45% 75%, rgba(255,214,110,.6), rgba(255,214,110,0) 70%); }
.xm-morning-answer { position: absolute; z-index: 8; transform: translate(-50%, -50%); border-radius: 12px; border: 3px solid #fff; object-fit: cover;
  box-shadow: 0 0 0 2px #F2BF26, 0 0 18px rgba(255,211,77,.9); opacity: 0; animation: xm-answer-up 2.6s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes xm-answer-up { 0% { opacity: 0; transform: translate(-50%, 60%) scale(.3); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -62%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9); } }
/* the hug: the pair stands where the host stood */
.xm-morning-hug { position: absolute; z-index: 5; right: -4%; bottom: 26px; width: auto; filter: drop-shadow(0 6px 6px rgba(0,0,0,.28)); }
/* the morning film is letterboxed all through: the gift, the cast and the hug stand just above the lower bar */
.is-morning-film .xm-cam.is-bars .xm-morning-gift, .is-morning-film .xm-cam.is-bars .xm-morning-light { bottom: calc(min(8%, 54px) + 22px); }
.is-morning-film .xm-cam.is-bars .xm-morning-host, .is-morning-film .xm-cam.is-bars .xm-morning-hug { bottom: calc(min(8%, 54px) + 14px); }
.is-morning-film .xm-cam.is-bars .xm-morning-elf { bottom: calc(min(8%, 54px) + 18px); }
/* the vibe step: on a short phone "That's me" stays in reach at the bottom of the screen once the cards push it down */
.xm-scene.is-mood .xm-play > .xm-btn.is-green { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; }
/* the creator's rug shot (pushed in on the ten golden tags): the host and the Elf at the frame's edges, clear of them */
.xm-cam.is-rug .xm-cam-host { scale: .8; transform-origin: 100% 100%; right: -3%; transition: scale .5s, right .5s; }
.xm-cam.is-rug .xm-cam-elf { scale: .76; transform-origin: 0 100%; left: -2%; transition: scale .5s, left .5s; }
.xm-cam.is-rug .xm-floor-tag { scale: .74; transform-origin: 50% 100%; }   /* pushed in: smaller, so the ten lie side by side */
/* a short or narrow phone: the invitation tag a little more compact, so "Let's go shopping" is on the first screen,
   and the name field's placeholder fits on one line */
@media (max-height: 700px) {
  .xm-hero.is-invite { padding-top: calc(54px + env(safe-area-inset-top)); padding-bottom: 24px; }
  .xm-hero.is-invite .xm-bigtag { margin-top: 8px; }
  .xm-hero.is-invite .xm-tag-face { gap: 6px; padding: 22px 12px 14px; }
  .xm-hero.is-invite .xm-polaroid-pic { width: 150px; height: 100px; }
  .xm-hero.is-invite .xm-polaroid-tree { height: 104px; }
  .xm-hero.is-invite .xm-polaroid-host { scale: .8; transform-origin: 100% 100%; }
  .xm-hero.is-invite .xm-tag-face .xm-h2 { font-size: 21px; }
  /* with the "who is on the tree" lines the tag is two lines taller: a smaller Polaroid pays for them */
  .xm-hero.is-invite .xm-proof { margin: 2px 0 18px; font-size: 13px; }
  .xm-hero.is-invite:has(.xm-proof:not([hidden])) .xm-polaroid-pic { width: 126px; height: 82px; }
  .xm-hero.is-invite:has(.xm-proof:not([hidden])) .xm-polaroid-tree { height: 86px; }
  .xm-hero.is-invite:has(.xm-proof:not([hidden])) .xm-polaroid-host { scale: .66; }
}
@media (max-width: 340px) { .is-invite ~ .xm-play .xm-input, .xm-scene .xm-play .xm-input { font-size: 19px; padding: 0 14px; } }
.xm-morning-thing.is-empty-box { width: 100%; }   /* the opened box, left on the rug after the unwrap */
/* the landing's window: the lit tree inside, nothing under it yet */
.xm-hero-pane { position: absolute; z-index: 1; overflow: hidden; pointer-events: none;
  background: radial-gradient(90% 80% at 50% 70%, #FFE2A8, #F6B867 70%, #E99A4B); box-shadow: inset 0 0 18px rgba(120,60,10,.35); }
.xm-hero-pane .xm-hero-wintree { left: 50%; bottom: -3%; height: 104%; transform: translateX(-50%); }

/* ── larger than life (Bail Me Out's toolkit): the friend on stage, emotion stickers, talking, a floating stage, the
   climax's gift tag ────────────────────────────────────────────────────────────────────────────────────────────── */
/* the friend stands front left, behind the box they fill; the box sits between them and the counter */
.xm-market-friend { position: absolute !important; z-index: 6; left: 3%; bottom: 8px; }   /* fully in the frame (at -3% a third of their face was off the edge on small phones), and in front of the box: they are the closest to the camera */
.xm-present.is-shop { left: 47%; }
.xm-say.is-friend { background: #FFF1D2; } .xm-say.is-friend::after { background: #FFF1D2; }
/* an emotion sticker over a head: DBM's spring (scale .35 → 1.12 → .96 → 1), a little float, then gone */
.xm-emote { position: absolute; z-index: 13; font-size: 30px; line-height: 1; pointer-events: none; transform: translate(-50%, -100%);
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 3px 3px rgba(0,0,0,.3));
  animation: xm-emote 1.5s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes xm-emote { 0% { opacity: 0; scale: .35; translate: 0 6px; } 18% { opacity: 1; scale: 1.12; } 28% { scale: .96; } 36% { scale: 1; translate: 0 0; }
  80% { opacity: 1; translate: 0 -12px; } 100% { opacity: 0; translate: 0 -22px; } }
/* who is talking: a small bob and sway while their line is up (stacks with the breathing and the pose pops) */
.xm-char.is-talking { animation: xm-talk .34s ease-in-out infinite alternate; }
@keyframes xm-talk { from { translate: 0 0; rotate: -1.4deg; } to { translate: 0 -3px; rotate: 1.4deg; } }
/* the stage floats a little (DBM's scene float), so the set is never dead still */
.xm-market-world { animation: xm-float 2.9s ease-in-out infinite alternate; }
@keyframes xm-float { from { translate: 0 0; } to { translate: 0 -4px; } }
/* the climax: the gift tag swings down on its string, the score counts up, the gift is stamped across it */
.xm-scoretag { position: absolute; z-index: 12; left: 50%; top: calc(64px + env(safe-area-inset-top)); width: min(250px, 68%); padding: 26px 14px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; transform-origin: 50% -60px;
  background: linear-gradient(#FFF8E6, #F5E2B4); border: 3px solid var(--outline); border-radius: 20px 20px 16px 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 0 0 3px #fff; translate: -50% 0;
  animation: xm-tag-swing 1.1s cubic-bezier(.34,1.56,.64,1) both; }
.xm-scoretag::before { content: ''; position: absolute; top: 9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #3A2742; box-shadow: inset 0 0 0 3px #C99A12; }
.xm-scoretag-string { position: absolute; left: 50%; bottom: 100%; width: 3px; height: 70px; margin-left: -1.5px; background: #B42B29; }
@keyframes xm-tag-swing { 0% { opacity: 0; transform: translateY(-160%) rotate(-14deg); } 45% { opacity: 1; transform: translateY(0) rotate(9deg); }
  70% { transform: rotate(-4deg); } 88% { transform: rotate(2deg); } 100% { transform: none; } }
.xm-scoretag.is-out { transition: opacity .4s, translate .5s ease-in, visibility 0s .5s; opacity: 0; translate: -50% -40px; visibility: hidden; pointer-events: none; }   /* gone, not just clear: it lay over the shop's stage */
.xm-scoretag-to { font: 800 15px/1.2 var(--hand); color: var(--ink); max-width: 100%; overflow-wrap: anywhere; }
.xm-scoretag-score { font: 900 64px/1 var(--title); color: var(--red-d); text-shadow: 0 3px 0 #fff; }
.xm-scoretag-score small { font-size: 26px; color: var(--ink); opacity: .7; margin-left: 2px; }
.xm-scoretag-n { display: inline-block; }
.xm-scoretag-n.is-pop { animation: xm-num-pop .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes xm-num-pop { from { scale: 1.45; } to { scale: 1; } }
.xm-scoretag-stamp { margin-top: 6px; padding: 5px 12px; border: 3px solid currentColor; border-radius: 10px; font: 900 18px/1.1 var(--title); text-transform: uppercase;
  letter-spacing: .03em; rotate: -7deg; opacity: 0; scale: 2.6; background: rgba(255,255,255,.55); }
.xm-scoretag-stamp.is-in { opacity: 1; scale: 1; transition: scale .35s cubic-bezier(.3,1.5,.5,1), opacity .2s; }
.xm-scoretag-stamp.is-top { color: #B8860B; } .xm-scoretag-stamp.is-front { color: #C8312E; }
.xm-scoretag-stamp.is-bottom { color: #2E7D4F; } .xm-scoretag-stamp.is-box { color: #5A3A22; }
@media (prefers-reduced-motion: reduce) { .xm-char.is-talking, .xm-market-world, .xm-scoretag { animation: none; } }
.xm-market-friend { transition: bottom .7s cubic-bezier(.3,0,.2,1); }
.xm-cam.is-market.is-bars .xm-market-friend { bottom: calc(min(8%, 54px) + 2px); }   /* never under the film's lower bar */
.is-shelving .xm-cam.is-market .xm-market-friend { bottom: 26px; }   /* the shop's ribbon rises over the stage: their name stays above it */
.xm-scoretag-to .xm-name { color: var(--red-d); }   /* the names read clearly on the cream tag */
.xm-morning-friend { position: absolute !important; z-index: 6; left: 2%; bottom: 26px; }
.is-morning-film .xm-cam.is-bars .xm-morning-friend { bottom: calc(min(8%, 54px) + 14px); }
/* the result's last shot: the friend on the left (in front of the Elf), the gift between them and the host */
.xm-morning-friend.is-final-friend { left: -4%; bottom: 22px; z-index: 5; }   /* just behind the gift and its tag */
.xm-cam.is-morning.is-final .xm-morning-elf { opacity: 0; }   /* the Elf has slipped away; the two of them and the gift */
/* the rug's tags lie neatly: a small alternating tilt instead of the scattered one */
.xm-cam.is-rug .xm-floor-tag { rotate: -3deg; }
.xm-cam.is-rug .xm-floor-tag:nth-child(even) { rotate: 3deg; }

/* ── the gift shop: the shelf the score opened, six gifts at a time (gift.js shelf) ────────────────────────────── */
.xm-play.is-shelf .xm-qbox { gap: 8px; }
.xm-shelf-head { font: 800 clamp(19px, 5.6vw, 23px)/1.15 var(--title); color: var(--ink); }
.xm-shelf-why { margin: -4px 0 0; text-align: center; font: 700 13px/1.3 'Nunito', sans-serif; color: #6B5A4E; }
.xm-shelf { --shelf: #8A5A33; --shelf-d: #5E3A1E; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 8px; padding: 10px 8px 12px; border-radius: 18px; background: linear-gradient(#FFF6E4, #F6E3C3);
  box-shadow: inset 0 0 0 3px #EBD3AC, 0 6px 18px rgba(120,80,30,.14); }
.xm-shelf.is-top { --shelf: #E2B53A; --shelf-d: #A87A10; background: radial-gradient(120% 80% at 50% 0%, #FFF7D6, #FBE6A6); box-shadow: inset 0 0 0 3px #F2CF63, 0 0 26px rgba(255,211,77,.55); }
.xm-shelf.is-front { --shelf: #C8312E; --shelf-d: #8E1E1C; }
.xm-shelf.is-bottom { --shelf: #4E7FC4; --shelf-d: #2B5AA6; background: repeating-linear-gradient(45deg, #FFF6E4 0 10px, #F8ECD6 10px 20px); }
.xm-shelf.is-box { --shelf: #6B4A2E; --shelf-d: #4A321F; background: linear-gradient(#EFE2CC, #E0CBA8); }
.xm-gift-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 4px 2px 12px;
  border: 0; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s; }
.xm-gift-stage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 16px; }
.xm-gift-stage::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); }
/* the shelf's plank under each gift, reaching into the gaps so a row reads as one plank */
.xm-gift-stage::after { content: ''; position: absolute; left: -7%; right: -7%; bottom: -3px; height: 7px; border-radius: 4px; pointer-events: none;
  background: linear-gradient(var(--shelf), var(--shelf-d)); box-shadow: 0 3px 4px rgba(0,0,0,.18); }
.xm-gift-card.is-picked .xm-gift-stage::after { opacity: 0; }
.xm-gift-pic { position: absolute; left: 4%; top: 2%; width: 92%; height: 92%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 5px 4px rgba(80,40,10,.3)); }
.xm-gift-stage > .xm-gift-emoji { position: absolute; inset: 4%; }
.xm-gift-emoji { position: relative; display: grid; place-items: center; width: 92%; height: 92%; font-size: clamp(34px, 11vw, 50px); line-height: 1;
  filter: drop-shadow(0 4px 3px rgba(80,40,10,.3)); }
.xm-gift-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;   /* 3: the joke is often the last words */ overflow: hidden; width: 100%; min-height: 2.3em;
  font: 800 clamp(11.5px, 3.4vw, 13.5px)/1.15 'Nunito', sans-serif; text-align: center; overflow-wrap: anywhere; }
.xm-gift-why { position: absolute; z-index: 2; left: 50%; top: -6px; transform: translateX(-50%) rotate(-3deg); max-width: 122%; padding: 2px 6px; border-radius: 99px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 800 10px/1.3 'Nunito', sans-serif; letter-spacing: -.2px; color: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.2); }
.xm-gift-why.is-local { background: var(--red); } .xm-gift-why.is-vibe { background: var(--pine-d); }
@media (hover: hover) { .xm-gift-card:hover .xm-gift-stage { background: rgba(255,255,255,.55); } }
.xm-gift-card.is-picked { transform: translateY(-5px) scale(1.06); }
.xm-gift-card.is-picked .xm-gift-stage { background: radial-gradient(circle, #FFF3B8, #FFD34D 75%); box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(255,211,77,.9); }
.xm-gift-card.is-picked .xm-gift-pic, .xm-gift-card.is-picked .xm-gift-emoji { animation: xm-gift-wiggle .5s ease-in-out; }
@keyframes xm-gift-wiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -8deg; scale: 1.12; } 65% { rotate: 6deg; } }
.xm-shelf.is-locked .xm-gift-card:not(.is-picked) { opacity: .35; filter: grayscale(.5); transition: opacity .3s, filter .3s; }
/* one row: "Show me others" small on the left, "Wrap it" taking the rest */
.xm-shelf-actions { display: flex; align-items: center; gap: 8px; }
.xm-shelf-actions .xm-btn.xm-shelf-wrap { flex: 1 1 0; width: auto; min-width: 0; min-height: 54px; padding: 6px 12px; font-size: clamp(16px, 4.6vw, 19px); }
.xm-shelf-wrap:disabled { opacity: .55; filter: grayscale(.4); }
.xm-shelf-more { flex: none; min-height: 48px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
/* while the shelf is up the market gives it a little room (the cast is refitted to the smaller stage) */
.is-shelving .xm-cam.is-market { min-height: clamp(262px, 37vh, 340px); min-height: clamp(262px, 37dvh, 340px); }
.xm-cam.is-market .xm-tagbar, .xm-cam.is-market .xm-badge { transition: opacity .4s; }
.is-shelving .xm-cam.is-market .xm-tagbar, .is-shelving .xm-cam.is-market .xm-badge { opacity: 0; pointer-events: none; }   /* the score is told: the shop has the stage */
@media (max-width: 340px) { .xm-shelf { gap: 12px 4px; padding: 8px 4px 12px; } .xm-shelf-more { padding: 0 9px; font-size: 13px; }
  .xm-gift-name { -webkit-line-clamp: 3; font-size: 11.5px; min-height: 3.45em; } }   /* a narrow phone: the whole name, on three lines */

/* ── THE REVEAL (gift.js revealGift), on both sides: the box cut along its seam into a lid and a base, the light
   between them, the gift rising from behind the base's front wall ───────────────────────────────────────────── */
.xm-present.is-revealing .xm-present-swing { position: relative; }
.xm-reveal-lid, .xm-reveal-body { position: absolute; left: 0; top: 0; width: 100%; height: auto; filter: drop-shadow(0 5px 4px rgba(0,0,0,.35)); }
.xm-reveal-body { z-index: 2; }
.xm-reveal-lid { z-index: 4; transform-origin: 50% 60%; }
.is-revealed .xm-reveal-lid { visibility: hidden; }
/* the light inside: a thin glow along the seam that flickers while it trembles, then pours out */
.xm-reveal-glow { position: absolute; z-index: 3; left: 50%; width: 112%; height: 30%; transform: translate(-50%, -50%) scale(.7); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,250,220,.95), rgba(255,214,120,.6) 38%, rgba(255,200,80,0) 70%); mix-blend-mode: screen; opacity: 0;
  transition: opacity .8s, transform .5s cubic-bezier(.2,.9,.3,1); }
.is-leak .xm-reveal-glow { opacity: .8; animation: xm-leak .18s ease-in-out infinite alternate; }
.is-burst .xm-reveal-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.5); animation: none; }
.is-revealed .xm-reveal-glow { opacity: .75; transform: translate(-50%, -50%) scale(1.3); }
@keyframes xm-leak { from { filter: brightness(.8); } to { filter: brightness(1.3); } }
/* centred with `translate` (applied before the spin's `rotate`): inside `transform` the centring turned with the spin
   and the whole burst circled round the box, over the cast's faces (owner, 2026-11-03) */
.xm-reveal-rays { position: absolute; z-index: 0; left: 50%; width: 300%; aspect-ratio: 1; translate: -50% -50%; transform: scale(.25); border-radius: 50%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(rgba(255,236,170,.55) 0 9deg, rgba(255,236,170,0) 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 16%, transparent 66%); mask: radial-gradient(circle, #000 16%, transparent 66%);
  transition: opacity .5s, transform 1.4s cubic-bezier(.2,.8,.3,1); animation: xm-ray-spin 16s linear infinite; }
.is-burst .xm-reveal-rays, .is-revealed .xm-reveal-rays { opacity: 1; transform: scale(1); }
.xm-cam.is-morning .xm-reveal-rays { width: 210%; }   /* in the room the light frames the gift, never washes over the cast's faces */
/* the gift: anchored on the opening, it starts small inside the box and rises out */
.xm-reveal-gift { position: absolute; z-index: 1; left: 50%; width: 118%; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none;
  transform: translate(-50%, 34%) scale(.42); transform-origin: 50% 100%; opacity: 0; }
.is-revealed .xm-reveal-gift { transform: translate(-50%, -8%) scale(1); opacity: 1; }
.xm-reveal-pic { display: block; width: 100%; height: auto; max-height: 24vh; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 0 14px rgba(255,236,170,.9)) drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.xm-reveal-gift .xm-gift-emoji { width: 100%; height: auto; aspect-ratio: 1; font-size: min(64px, 15vw); }
.xm-cam.is-morning .xm-reveal-pic { max-height: 19vh; max-height: 19dvh; }   /* a tall gift (a sock, a guitar) stays under the wall photo */
.is-named .xm-reveal-pic, .is-named .xm-reveal-gift .xm-gift-emoji { animation: xm-gift-float 2.6s ease-in-out infinite; }
@keyframes xm-gift-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes xm-ray-spin { to { rotate: 360deg; } }
.xm-reveal-name { position: relative; width: max-content; max-width: min(230px, 64vw); padding: 3px 10px; border-radius: 10px; background: var(--paper); border: 2px solid var(--outline);
  font: 800 13px/1.2 var(--hand); color: var(--ink); text-align: center; text-wrap: balance; box-shadow: 0 3px 4px rgba(0,0,0,.25);
  rotate: -2deg; opacity: 0; scale: .6; transition: opacity .35s, scale .45s cubic-bezier(.3,1.6,.5,1); }
.is-named .xm-reveal-name { opacity: 1; scale: 1; }
/* who it is from, handwritten under the gift's name */
.xm-reveal-from { display: block; margin-top: 1px; font: 700 .82em/1.15 var(--hand); color: #8A5A33; }
/* held in the host's arms: the card has said its piece */
.xm-reveal-gift.is-held { z-index: 7; }
.is-held .xm-reveal-name { opacity: 0; scale: .6; }
.is-held .xm-reveal-pic, .is-held .xm-gift-emoji { animation: none; }
/* the sparkle ring as a wearable goes on */
.xm-poof { position: absolute; z-index: 12; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  border: 4px solid rgba(255,236,160,.95); box-shadow: 0 0 18px 6px rgba(255,220,120,.7), inset 0 0 14px rgba(255,255,255,.8); animation: xm-poof .8s ease-out forwards; }
@keyframes xm-poof { 0% { width: 20px; height: 20px; opacity: 1; } 100% { width: 230px; height: 230px; opacity: 0; border-width: 1px; } }
.xm-sheet-again { margin: 2px 0 6px; min-height: 36px; padding: 0 14px; font-size: 14px; border-color: #E3CFAD; background: #FFF6E4; color: var(--ink); }
/* the scarf and the sweater fly onto the host, the coal into their paw */
.xm-reveal-gift.is-worn { opacity: 0 !important; transform: translate(40%, -80%) scale(.4) rotate(20deg) !important; transition: opacity .45s, transform .45s ease-in; }
/* the burst of light over the whole shot */
.xm-reveal-flash { position: absolute; z-index: 9; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, #fff, rgba(255,244,200,.85) 30%, rgba(255,220,140,0) 70%); animation: xm-flash-burst .9s ease-out forwards; }
@keyframes xm-flash-burst { 0% { width: 10px; height: 10px; opacity: 1; } 35% { width: 460px; height: 460px; opacity: .9; } 100% { width: 680px; height: 680px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .xm-reveal-rays, .is-named .xm-reveal-pic, .xm-reveal-glow { animation: none; } }
.xm-endcard-tier { align-self: center; padding: 4px 12px; border: 3px solid currentColor; border-radius: 10px; font: 900 15px/1.1 var(--title); text-transform: uppercase; rotate: -3deg; background: #fff; }
.xm-endcard-tier.is-top { color: #B8860B; } .xm-endcard-tier.is-front { color: #C8312E; } .xm-endcard-tier.is-bottom { color: #2B5AA6; } .xm-endcard-tier.is-box { color: #5A3A22; }

/* ── the creator's tree: presents still wrapped glow and bob; the list says "New" until opened ─────────────────── */
.xm-present.is-new .xm-present-swing { animation: xm-new-bob 1.6s ease-in-out infinite; }
.xm-present.is-new .xm-present-pic { filter: drop-shadow(0 0 9px rgba(255,236,160,.95)) drop-shadow(0 5px 4px rgba(0,0,0,.3)); }
.xm-present.is-new .xm-present-swing::after { content: '\2728'; position: absolute; right: -10%; top: -14%; font-size: calc(var(--cq, 1cqw) * 6); line-height: 1; animation: xm-new-twinkle 1.2s ease-in-out infinite alternate; }
@keyframes xm-new-bob { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-4deg) translateY(-2px); } 75% { transform: rotate(4deg) translateY(-2px); } }
@keyframes xm-new-twinkle { from { opacity: .35; scale: .8; } to { opacity: 1; scale: 1.15; } }
@media (prefers-reduced-motion: reduce) { .xm-present.is-new .xm-present-swing, .xm-present.is-new .xm-present-swing::after { animation: none; } }
.xm-row-gift { display: block; margin-top: 2px; font: 700 13px/1.25 'Nunito', sans-serif; color: #6B5A4E; }   /* the whole gift name (two lines if it must) */
.xm-row-gift.is-new { display: inline-block; align-self: flex-start; padding: 1px 8px; border-radius: 99px; background: var(--red); color: #fff; font-weight: 800; animation: xm-new-twinkle 1.2s ease-in-out infinite alternate; }
.xm-to-open { color: var(--red-d); }
.xm-sheet-present.is-gift { width: 64px; height: 64px; object-fit: contain; }
.xm-sheet-present.xm-gift-emoji { font-size: 44px; }
.xm-sheet-gift { margin: 2px 0 4px; font: 800 15px/1.25 'Nunito', sans-serif; color: var(--ink); }

/* ── the unboxing: the creator opens a friend's present (gift.js unbox) ──────────────────────────────────────── */
.xm-unbox { position: fixed; inset: 0; z-index: 60; overflow: hidden; overscroll-behavior: contain; color: #fff;
  background: radial-gradient(80% 55% at 50% 48%, #3B2B52 0%, #1C1530 60%, #0E0A1A 100%); animation: xm-unbox-in .35s ease-out; }
@keyframes xm-unbox-in { from { opacity: 0; } }
.xm-unbox::before, .xm-unbox::after { content: ''; position: absolute; left: 0; right: 0; height: 5vh; z-index: 6; background: #000; pointer-events: none; }
.xm-unbox::before { top: 0; } .xm-unbox::after { bottom: 0; }
.xm-unbox-stage { position: absolute; inset: 0; }
.xm-unbox-title { position: absolute; left: 16px; right: 56px; top: calc(5vh + 18px + env(safe-area-inset-top)); margin: 0 auto; max-width: 440px;
  font: 800 clamp(24px, 7.4vw, 32px)/1.1 var(--title); text-align: center; color: var(--gold); -webkit-text-stroke: 5px #2A1838; paint-order: stroke fill;
  transition: opacity .4s; }
/* the floor line: the creator on the left, the present on the right; it steps up once the results come in */
.xm-unbox-floor { position: absolute; left: 0; right: 0; bottom: 30%; display: flex; align-items: flex-end; justify-content: center; gap: 2vw;
  transition: bottom .6s cubic-bezier(.3,.8,.3,1); }
.xm-unbox-floor::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 40px; border-radius: 50%; z-index: -1;
  background: radial-gradient(rgba(255,226,150,.32), rgba(255,226,150,0) 70%); }
.xm-unbox-host { position: relative !important; flex: none; z-index: 1; }   /* over the box's rays (owner, 2026-11-03: never light over a face), under the gift */
.xm-unbox-spot { position: relative; flex: none; width: min(42vw, 200px); cursor: pointer; }
.xm-present.is-unbox { position: relative; left: auto; top: auto; width: 100%; transform: none; z-index: 2; }
.xm-present.is-unbox .xm-present-swing { animation: xm-new-bob 1.6s ease-in-out infinite; }
.is-lit .xm-present.is-unbox .xm-present-swing { animation: none; }
.xm-unbox-spot .xm-present-tag.is-from { bottom: -12px; font-size: 15px; }
.xm-unbox-hint { position: absolute; left: 0; right: 0; top: calc(100% + 30px); margin: 0; text-align: center; font: 800 18px/1.2 var(--title); color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.6); animation: xm-new-twinkle .9s ease-in-out infinite alternate; cursor: pointer; }
.xm-unbox-rays { position: absolute; z-index: 0; left: 50%; top: 40%; width: 320%; aspect-ratio: 1; translate: -50% -50%; transform: scale(.2); border-radius: 50%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(rgba(255,226,150,.6) 0 8deg, rgba(255,226,150,0) 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); transition: opacity .4s, transform 1.6s cubic-bezier(.15,.85,.25,1); animation: xm-ray-spin 16s linear infinite; }
.is-lit .xm-unbox-rays { opacity: 1; transform: scale(1); }   /* they burst out of the opening */
.xm-unbox.is-box .xm-unbox-rays { background: repeating-conic-gradient(rgba(200,190,170,.25) 0 9deg, rgba(200,190,170,0) 9deg 22deg); }
/* the reveal, bigger on its own stage; the name may take two lines */
.xm-unbox .xm-reveal-gift { width: 128%; }
.xm-unbox .xm-reveal-pic { max-height: 28vh; transition: max-height .6s cubic-bezier(.3,.8,.3,1); }
.xm-unbox.is-done .xm-reveal-pic { max-height: min(20vh, calc(100vh - 5vh - 250px - 290px)); }   /* room for the close button above it */
.xm-unbox .xm-reveal-name { max-width: 44vw; padding: 5px 14px; border-width: 3px; font-size: clamp(16px, 4.8vw, 20px); }
.xm-unbox.is-done .xm-reveal-name { max-width: 84vw; }   /* off-centre beside the creator it stays narrow; centred it may widen */
.xm-present.is-unbox.is-revealing .xm-present-swing { animation: none; }
.xm-unbox .xm-say { z-index: 4; }
/* the results: a panel up from the bottom; the title gives its room to the gift */
.xm-unbox-after { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(5vh + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 16px 14px; }
.xm-unbox-after:empty { display: none; }
.xm-unbox-after .xm-actions { width: 100%; max-width: 420px; }
.xm-unbox.is-done .xm-unbox-floor { bottom: calc(5vh + 250px); }
.xm-unbox.is-done .xm-unbox-title { opacity: 0; }
.xm-unbox.is-done .xm-unbox-floor .xm-unbox-host { display: none; }   /* the gift has the screen (centred); the panel says the rest */
.xm-unbox-stamp { padding: 5px 14px; border: 3px solid currentColor; border-radius: 10px; background: rgba(255,255,255,.95); font: 900 clamp(16px, 4.8vw, 19px)/1.1 var(--title);
  text-transform: uppercase; text-align: center; rotate: -4deg; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.xm-unbox-stamp.is-top { color: #B8860B; } .xm-unbox-stamp.is-front { color: #C8312E; } .xm-unbox-stamp.is-bottom { color: #2B5AA6; } .xm-unbox-stamp.is-box { color: #5A3A22; }
.xm-unbox-score { margin: 0; font: 800 17px/1.3 'Nunito', sans-serif; text-align: center; color: #F4ECFF; }
.xm-unbox-close { position: absolute; z-index: 7; top: calc(5vh + 10px + env(safe-area-inset-top)); right: 10px; color: #fff; background: rgba(255,255,255,.14); }
@media (prefers-reduced-motion: reduce) { .xm-unbox-rays, .xm-present.is-unbox .xm-present-swing { animation: none; } }

/* ── who is who: a name label at each character's feet (gift.js nameTag) ──────────────────────────────────────── */
.xm-cast-name { position: absolute; z-index: 3; left: 50%; bottom: -6px; transform: translateX(-50%); max-width: 150%; padding: 2px 9px 3px; border-radius: 99px;
  background: rgba(255,255,255,.96); border: 2px solid var(--red); color: var(--ink); font: 800 12px/1.15 var(--title); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; box-shadow: 0 2px 5px rgba(0,0,0,.28); pointer-events: none; animation: xm-name-in .4s .25s cubic-bezier(.3,1.5,.5,1) both; }
.xm-cast-name.is-friend { border-color: var(--pine-d); }
.xm-cast-name.is-pinned { bottom: auto; transform: translate(-50%, -100%); z-index: 9; }
@keyframes xm-name-in { from { opacity: 0; scale: .6; } }
/* a mirrored character (walking left) keeps its name readable */
.xm-char.is-mirrored .xm-cast-name { scale: -1 1; }
/* small characters (the market's Polaroid) and the busy result: a smaller label */
.xm-badge-host .xm-cast-name { display: none; }
.xm-market-friend .xm-cast-name { bottom: 30%; left: 58%; }   /* the question panel covers their feet: the name on their chest */
.xm-cam.is-market .xm-market-host .xm-cast-name { bottom: 12%; }
.xm-cam.is-morning.is-final .xm-cast-name { bottom: 22%; }   /* the result: clear of the panel's snowy edge */
.xm-cam.is-reveal-cast .xm-cam-host .xm-cast-name { bottom: 22%; }
.xm-cam.is-desk-stage .xm-cast-name { bottom: 22%; }   /* writing the wish list: the question panel covers their feet */   /* the board and the rug too: the panel's snow hid the creator's name */
.xm-cam.is-morning .xm-morning-friend .xm-cast-name { left: 58%; }
@media (prefers-reduced-motion: reduce) { .xm-cast-name { animation: none; } }

/* "Tap to speed up ⏩": small, in the film's lower letterbox bar (gift.js tapHint) */
.xm-taphint { position: absolute; z-index: 14; left: 50%; bottom: max(6px, calc(min(8%, 54px) / 2 - 10px)); transform: translateX(-50%); padding: 3px 10px 4px;
  border-radius: 99px; background: rgba(0,0,0,.42); color: rgba(255,255,255,.92); font: 800 12px/1.2 'Nunito', sans-serif; white-space: nowrap; pointer-events: none;
  animation: xm-taphint-in .5s ease-out both, xm-taphint-pulse 2.4s ease-in-out .5s infinite; }
@keyframes xm-taphint-in { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes xm-taphint-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .xm-taphint { animation: none; } }

/* the friend's result: one big "write your own" button, the rest small links under it (gift.js result) */
.xm-result-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 18px; margin-top: 2px; }
.xm-result-links .xm-link { padding: 8px 6px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.xm-btn.xm-own { animation: xm-own-pulse 2.4s ease-in-out 1.6s infinite; }
.xm-btn.xm-own:active { animation: none; }   /* the pulse's transform would win over the press: it sinks when tapped */
@keyframes xm-own-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .xm-btn.xm-own { animation: none; } }