/* Part 1, the tree game's scenes (docs/christmas-game/tree/DIRECTORS-SCRIPT.md), on core.css. The art is ours
   (public/christmas/img, made in Google Flow); the lights, the hooks and the names are drawn by tree.js. */

/* ── 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-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; }
.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 mood'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 (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; align-items: center; gap: 8px; min-width: 0; }
.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; }
.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 */
.xm-proof { margin: 8px 0 0; 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 friend's result: one big "make your own" button, the rest small links under it (owner, 2026-11-02) */
.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; } }