/* The Christmas trilogy's shared look (docs/christmas-game/BUILD-PLAN.md §4.6): the snowy night stage, buttons, cards,
   speech bubbles, the loader, the share block, toasts and the footer under the game. Each part adds its own scenes
   ({game}.css). Palette: docs/christmas-game/tree/ART-DIRECTION.md. Every picture carries its own size; CSS only places
   and animates it. */
:root {
  --night: #1F2B4D; --night2: #2C3B66; --night-deep: #141C36; --lamp: #FFD9A0; --pine: #3FA66B; --pine-d: #2E8B57;
  --red: #E8423F; --red-d: #B42B29; --gold: #FFD34D; --gold-d: #C99A12; --snow: #F4F8FF; --mint: #7FD1AE; --pink: #FF4F8B;
  --ink: #23222B; --outline: #3B2A26; --paper: #FFF8EC; --muted: #6B6A80; --soft: #C9D4EE; --line: #E7DCCB;
  --hand: 'Shantell Sans', 'Nunito', sans-serif; --title: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--night-deep); }
body { font-family: 'Nunito', system-ui, sans-serif; color: #fff; -webkit-tap-highlight-color: transparent; }
:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ja) body { word-break: auto-phrase; overflow-wrap: anywhere; }   /* a phrase wider than its card may still break */
button { font: inherit; color: inherit; }
.xm-noscript { padding: 24px; }

/* ── the stage: one portrait column (≤ 480 px), the winter night behind every scene ───────────────────────────── */
.xm-stage { position: relative; max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; overflow: hidden;
  background: radial-gradient(circle at 84% 5%, rgba(255,236,170,.2) 0, rgba(255,236,170,0) 24%),
    radial-gradient(ellipse at 50% -10%, var(--night2) 0%, var(--night) 48%, var(--night-deep) 100%); }
/* the docked mute button (js/sound.js) */
.xm-top .xm-site { flex: none; }
/* right-to-left (Arabic): the header row flips, so the mute button goes to the left */
[dir="rtl"] .xm-sound { right: auto; left: 12px; }
.xm-sound { position: absolute; z-index: 60; right: 12px; top: calc(12px + env(safe-area-inset-top)); width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.55);
  border-radius: 50%; background: rgba(28,20,44,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 17px; line-height: 1;
  cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.xm-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1.6px 1.6px at 12% 8%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 31% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 74% 12%, #FFE7A8 50%, transparent 51%), radial-gradient(1.2px 1.2px at 58% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 90% 36%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 7% 44%, #fff 50%, transparent 51%);
  background-size: 100% 900px; animation: xm-twinkle 4s ease-in-out infinite alternate; }
@keyframes xm-twinkle { to { opacity: .3; } }

/* falling snow (core.js snow()): a few soft flakes, drawn once per scene, never more than 28 */
.xm-snow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.xm-snow i { position: absolute; top: -12px; border-radius: 50%; background: var(--snow); opacity: .85;
  animation: xm-snowfall linear infinite; will-change: transform; }
@keyframes xm-snowfall { to { transform: translate3d(var(--drift, 20px), 105vh, 0); } }

/* ── scenes ───────────────────────────────────────────────────────────────────────────────────────────────── */
.xm-scene { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 16px;
  padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); animation: xm-enter .45s cubic-bezier(.2,.9,.3,1.2) both; }
.xm-scene > :not(.xm-snow):not(.xm-loader) { position: relative; z-index: 1; }
@keyframes xm-enter { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.xm-ssr { color: #fff; }
.xm-ssr .xm-steps { margin: 0; padding-inline-start: 20px; }

.xm-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; }
.xm-site { font-family: var(--title); font-weight: 800; font-size: 18px; text-decoration: none; color: #fff; }
.xm-site span { color: var(--pink); }
/* the homepage's logo (orange on white there): on a soft white pill, so it reads the same on every painted scene */
.xm-site.is-logo { display: flex; align-items: center; height: 38px; padding: 0 12px 0 9px; border-radius: 99px; background: rgba(255,255,255,.94);
  box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.xm-site-logo { display: block; height: 30px; width: auto; }
.xm-tag { font-family: var(--title); font-weight: 800; font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.xm-h1 { margin: 0; font-family: var(--title); font-weight: 800; font-size: 40px; line-height: 1.02; text-wrap: balance; }
.xm-h2 { margin: 0; font-family: var(--title); font-weight: 800; font-size: 28px; line-height: 1.08; text-wrap: balance; }
.xm-sub { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.38; color: var(--soft); text-wrap: pretty; }
.xm-small { margin: 0; font-size: 14px; font-weight: 700; color: #AEB9DA; }
.xm-center { text-align: center; align-items: center; }
.xm-grow { flex: 1 1 auto; }
/* names are always marked: gold with a hand-drawn red underline */
.xm-name { color: var(--gold); white-space: nowrap; padding-bottom: .1em; display: inline-block; line-height: 1.05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6 C30 2 60 9 117 4' fill='none' stroke='%23E8423F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .3em no-repeat; }
.xm-card .xm-name, .xm-paper .xm-name { color: var(--red-d); }

/* ── buttons, inputs (tactile, DBM's build: rim, gloss, deep shadow, sinks on press) ─────────────────────────── */
.xm-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; width: 100%;
  padding: 8px 18px; border: 3px solid rgba(255,255,255,.5); border-radius: 24px; color: #fff; font-family: var(--title);
  font-weight: 800; font-size: 22px; line-height: 1.1; cursor: pointer; text-decoration: none; text-align: center;
  background: linear-gradient(180deg, #F2625E 0%, var(--red) 55%, #D23430 100%); box-shadow: 0 6px 0 var(--red-d), 0 12px 22px rgba(0,0,0,.28);
  text-shadow: 0 2px 0 rgba(120,20,10,.35); transition: transform .12s, box-shadow .12s; }
.xm-btn:hover { transform: translateY(-1px); }
.xm-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--red-d), 0 4px 10px rgba(0,0,0,.25); }
.xm-btn.is-green { background: linear-gradient(180deg, #55BE83 0%, var(--pine) 55%, #339159 100%); box-shadow: 0 6px 0 #22704A, 0 12px 22px rgba(0,0,0,.28); text-shadow: 0 2px 0 rgba(10,70,30,.35); }
.xm-btn.is-gold { background: linear-gradient(180deg, #FFE27F 0%, var(--gold) 55%, #F2BF26 100%); color: var(--ink); box-shadow: 0 6px 0 var(--gold-d), 0 12px 22px rgba(0,0,0,.28); text-shadow: none; }
.xm-btn.is-ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); box-shadow: 0 4px 0 rgba(0,0,0,.25); font-size: 18px; min-height: 52px; text-shadow: none; }
/* on the paper panel a see-through button would be white on cream: there it is a paper button with dark ink */
.xm-play .xm-btn.is-ghost { background: #FFFDF8; color: var(--ink); border-color: var(--outline); box-shadow: 0 4px 0 rgba(60,30,20,.22); }
.xm-btn[disabled] { opacity: .55; pointer-events: none; }
.xm-btn.is-shake { animation: xm-shake .4s; }
@keyframes xm-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.xm-link { align-self: center; padding: 8px 12px; border: 0; background: none; color: var(--soft); font-weight: 800; font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.xm-input { width: 100%; min-height: 58px; padding: 0 18px; border: 3px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink);
  font: 800 22px/1 var(--title); outline: none; box-shadow: inset 0 3px 0 rgba(0,0,0,.05); }
.xm-input:focus { border-color: var(--gold); }
.xm-label { font-family: var(--title); font-weight: 800; font-size: 18px; color: #fff; }
.xm-error { min-height: 20px; color: #FFB4B2; font-weight: 800; font-size: 15px; }

/* paper cards (warm, like a Christmas card) */
.xm-card { position: relative; padding: 18px; border-radius: 22px; background: var(--paper); color: var(--ink);
  border: 3px solid #fff; box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 16px 30px rgba(0,0,0,.25); }

/* ── speech bubbles (core.js say()): typed in, a tail pointing at who speaks ───────────────────────────────── */
.xm-say { position: absolute; z-index: 6; max-width: 210px; padding: 9px 13px; border-radius: 18px; background: #fff; color: var(--ink);
  font: 800 16px/1.25 var(--hand); box-shadow: 0 4px 0 rgba(0,0,0,.18); border: 2.5px solid var(--outline); text-wrap: pretty; }
.xm-say::after { content: ''; position: absolute; bottom: -11px; left: var(--tail, 26px); width: 16px; height: 16px; background: #fff;
  border-right: 2.5px solid var(--outline); border-bottom: 2.5px solid var(--outline); transform: rotate(45deg) skew(8deg, 8deg); border-radius: 0 0 4px 0; }
.xm-say.is-up::after { bottom: auto; top: -11px; transform: rotate(225deg) skew(8deg, 8deg); }
.xm-say.is-under::after { display: none; }   /* moved below the thing it avoids: its tail would point at the wrong one */
.xm-say.is-elf { background: #EFFFF6; } .xm-say.is-elf::after { background: #EFFFF6; }
.xm-say .xm-name { color: var(--red-d); }

/* ── loader (core.js gate()): the title lettering and three bouncing lights ───────────────────────────────── */
.xm-loader { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(120% 70% at 50% 100%, #3A4B7E, var(--night) 60%); }
.xm-dots { display: flex; gap: 8px; }
.xm-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); animation: xm-dot .9s ease-in-out infinite; }
.xm-dots i:nth-child(2) { background: var(--red); animation-delay: .16s; } .xm-dots i:nth-child(3) { background: var(--mint); animation-delay: .32s; }
@keyframes xm-dot { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-8px); } }

/* the title lettering (sticker letters), used by the landing and the loader */
.xm-logo { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: .98; font-family: var(--title); font-weight: 800; }
.xm-logo-top { font-size: clamp(20px, 6vw, 26px); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; rotate: -3deg; }
.xm-logo-main { position: relative; font-size: clamp(40px, 13vw, 58px); color: var(--gold); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; }

/* ── toast, notices ───────────────────────────────────────────────────────────────────────────────────────── */
.xm-toast { position: fixed; left: 16px; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 60; width: max-content; max-width: calc(100vw - 32px);
  margin: 0 auto; padding: 12px 18px; border-radius: 16px; background: var(--ink); color: #fff; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  animation: xm-pop .3s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes xm-pop { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.xm-notice { position: fixed; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 61; display: flex; align-items: center; gap: 10px;
  max-width: 456px; margin: 0 auto; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: #fff; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.xm-notice span { flex: 1; }
.xm-notice button { flex: none; border: 0; border-radius: 12px; padding: 9px 14px; background: var(--red); color: #fff; cursor: pointer; }
.xm-notice.is-busy button { opacity: .5; pointer-events: none; }

/* sparkles (core.js sparkle()) and confetti */
.xm-spark { position: absolute; z-index: 8; width: 10px; height: 10px; pointer-events: none; animation: xm-spark 1.1s ease-out forwards; }
.xm-spark::before { content: '✦'; position: absolute; inset: -6px; font-size: 18px; line-height: 1; color: var(--gold); text-shadow: 0 0 8px rgba(255,211,77,.8); }
@keyframes xm-spark { from { opacity: 1; transform: translate(0, 0) scale(.4); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(90deg); } }
.xm-confetti { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 3px; z-index: 9; pointer-events: none; animation: xm-fall 2.6s linear forwards; }
/* the celebration (core.js confetti): the canvas over the stage, and the warm flash of the cannons */
.xm-confetti-canvas { position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; pointer-events: none; }
.xm-confetti-flash { position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(60% 45% at 0 100%, rgba(255,226,140,.75), rgba(255,226,140,0) 70%), radial-gradient(60% 45% at 100% 100%, rgba(255,226,140,.75), rgba(255,226,140,0) 70%),
    radial-gradient(80% 60% at 50% 40%, rgba(255,246,214,.45), rgba(255,246,214,0) 70%);
  animation: xm-burst .9s ease-out forwards; }
@keyframes xm-burst { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xm-fall { to { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(720deg); } }

/* ── share block (Don't Block Me's share screen: link + Copy, one big app button, app tiles) ──────────────── */
.xm-share { display: flex; flex-direction: column; gap: 10px; }
.xm-share-ico { display: inline-flex; flex: none; width: 22px; height: 22px; } .xm-share-ico svg { width: 100%; height: 100%; }
.xm-linkrow { display: flex; align-items: center; gap: 8px; min-width: 0; padding-block: 6px; padding-inline: 12px 6px; border-radius: 18px; background: #fff;
  border: 2px solid var(--line); box-shadow: 0 3px 0 rgba(31,43,77,.1); }
.xm-linkrow-ico { flex: none; display: flex; color: #4C8DF6; } .xm-linkrow-ico svg { width: 20px; height: 20px; translate: 0 1px; }
.xm-linkrow-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate;
  font: 700 14px/1.2 'Nunito', sans-serif; color: var(--night); }
.xm-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px;
  background: #FFE7A0; color: var(--night); font: 800 15px/1 var(--title); text-transform: capitalize; cursor: pointer; }
.xm-copy svg { width: 16px; height: 16px; translate: 0 1.7px; }   /* level with the word's letters (measured) */ .xm-copy.is-done { background: #C8F1D3; }
.xm-share-main { min-height: 60px; font-size: clamp(16px, 5vw, 21px); gap: 10px; text-shadow: none; }
.xm-share-main svg { width: 28px; height: 28px; translate: 0 -3px; }   /* Baloo's capitals sit high in their line: the icon meets them (measured) */
.xm-share-main.is-wa { background: #1FAF5A; box-shadow: 0 5px 0 #157A3F, 0 12px 22px rgba(0,0,0,.25); }
.xm-share-main.is-line { background: #06C755; box-shadow: 0 5px 0 #048A3B, 0 12px 22px rgba(0,0,0,.25); }
.xm-share-main.is-kakao { background: #FEE500; color: #191919; box-shadow: 0 5px 0 #C9B500, 0 12px 22px rgba(0,0,0,.25); }
.xm-sharetiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.xm-sharetile { display: flex; align-items: center; gap: clamp(6px, 2.2vw, 10px); min-width: 0; min-height: 54px; padding: 8px clamp(7px, 2.4vw, 10px); border: 0; border-radius: 16px;
  background: #fff; color: var(--night); font: 800 clamp(12.5px, 3.8vw, 15px)/1.1 'Nunito', sans-serif; text-align: start; text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 #C7D3E6, 0 6px 14px rgba(0,0,0,.12); }
.xm-sharetile:active { translate: 0 2px; box-shadow: 0 1px 0 #C7D3E6; }
.xm-sharetile > span:last-child { min-width: 0; overflow-wrap: break-word; }
.xm-sharetile-badge { flex: none; display: flex; align-items: center; justify-content: center; width: clamp(28px, 9vw, 36px); height: clamp(28px, 9vw, 36px); border-radius: 50%; color: #fff; }
.xm-sharetile-badge { position: relative; }
/* pinned to the circle's exact centre (flex left it a pixel or more up and left, measured) */
.xm-sharetile-badge svg { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 20px; height: 20px; }
.xm-sharetile.is-ig .xm-sharetile-badge { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.xm-sharetile.is-sc .xm-sharetile-badge { background: #FFFC00; color: #111; }
.xm-sharetile.is-fb .xm-sharetile-badge { background: #1877F2; }
.xm-sharetile.is-ms .xm-sharetile-badge { background: linear-gradient(45deg, #0695FF, #A334FA 60%, #FF6968); }
.xm-sharetile.is-tg .xm-sharetile-badge { background: #2AABEE; }
.xm-sharetile.is-wa .xm-sharetile-badge { background: #1FAF5A; }
.xm-sharetile.is-line .xm-sharetile-badge { background: #06C755; }
.xm-sharetile.is-other .xm-sharetile-badge { background: #E8EEF7; color: #4C8DF6; }
.xm-sharetile.is-other .xm-sharetile-badge svg { width: 16px; height: 16px; }

/* the small ad under a screen's share buttons (the site's shared 300×100 code, verbatim): its space kept from the start */
.xm-top-ad { flex: none; display: block; min-height: 100px; }
/* at the top of a result card: the fixed 300 px banner may use the card's side padding (a 320 px phone leaves it 292) */
.xm-play > .xm-top-ad { margin: 0 -14px; display: flex; justify-content: center; }

/* ── the footer under the game (the AdSense unit + "Play something fun"), on snow-white paper ───────────────── */
.xm-footer { max-width: 480px; margin: 0 auto; padding: 24px 0 12px; background: var(--snow); color: var(--night); }
.xm-footer-ad { margin: 0 12px 8px; min-height: 100px; }

@media (prefers-reduced-motion: reduce) {
  .xm-scene { animation: xm-fade .3s both; }
  .xm-stage::before, .xm-dots i { animation: none; }
  .xm-snow { display: none; }
}
@keyframes xm-fade { from { opacity: 0; } }