/* ============================================================
   SANTA OLIVER — Snowman Workshop
   A bright sticker-book panel sitting inside the dark North
   Pole page. Sized for thumbs first: every tappable thing
   clears 44px, and nothing needs a precise drag.
   ============================================================ */

.sm-app {
  --sm-ink: #1b2b3d;
  --sm-ink-soft: #5c7089;
  --sm-line: #d3e0ee;
  --sm-panel: #fffdf6;
  --sm-frost: #edf6f7;
  --sm-evergreen: #123d38;
  --sm-evergreen-deep: #082d31;
  --sm-gold: #d5b85f;
  --sm-red: #a93639;
  margin-top: 18px;
  display: grid;
  gap: 14px;
}
/* Grid items default to min-width:auto, so they refuse to shrink below their
   content's minimum. The category chips are a nowrap flex row ~750px wide, so
   without this the whole tray inflated to that width on a phone and half the
   stickers sat off-screen instead of the chips simply scrolling. */
.sm-app > *,
.sm-workspace > *,
.sm-workspace-scroll > * { min-width: 0; }

/* These wrappers stay transparent while the activity is parked in the map.
   Opening the Workshop turns them into its bounded editor on every device. */
.sm-workspace,
.sm-workspace-scroll { display: contents; }

/* Inside the fullscreen activity window the title bar already reads "Snowman
   Workshop", so the card's own icon, heading and blurb say it a second time.
   On a phone that duplication pushed the sticker tray entirely below the fold,
   leaving a child looking at a snowman with no visible way to dress it. */
#snowman.in-window {
  opacity: 1;
  transform: none;
}
#snowman.in-window > .toy-ico,
#snowman.in-window > h3,
#snowman.in-window > .toy-sub { display: none; }
#snowman.in-window .sm-app { margin-top: 0; }
@media (max-width: 899px) {
  #snowman.in-window {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 12px;
  }
  #snowman.in-window .sm-app { width: 100%; max-width: 100%; }
}

/* ---------------- stage ---------------- */
.sm-stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--sm-sky-top, var(--sm-frost)),
    var(--sm-sky-bottom, var(--sm-frost)));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
/* The stage hugs the artwork rather than letterboxing it. Any surround would
   have to track the scene's sky AND its ground AND whatever tint the weather
   lays over both -- three things that drift apart the moment one changes. With
   no gap there is nothing to keep in sync. On phones the artwork drives the
   width; on wider screens it is sized by height so the tray keeps its room. */
.sm-stage {
  aspect-ratio: 400 / 560;          /* the scene's own proportions */
  width: min(100%, 43vh);           /* 43vh x 1.4 keeps it under ~60vh tall */
  margin-inline: auto;
}
.sm-canvas { position: relative; z-index: 1; display: block; height: 100%; }
.sm-canvas svg { display: block; width: 100%; height: 100%; }

/* Modern North Pole stage treatment. The procedural Snowman remains the source
   of truth, but the live stage now feels like a place rather than a flat SVG
   card: subtle atmosphere, a department plaque and short feedback effects all
   sit above the artwork without intercepting taps. */
.sm-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.34),
    inset 0 0 42px rgba(17,55,86,.12),
    inset 0 -38px 70px rgba(20,64,82,.10);
}
.sm-stage-ambient,
.sm-reaction-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sm-stage-ambient { z-index: 2; }
.sm-reaction-layer { z-index: 3; }
.sm-ambient-glow {
  position: absolute;
  inset: -12% -18% 42%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,246,190,.22), transparent 64%);
  opacity: .55;
}
.sm-ambient-flake {
  position: absolute;
  top: -10%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  filter: drop-shadow(0 0 3px rgba(255,255,255,.5));
  animation: sm-ambient-fall var(--sm-fall, 9s) linear infinite;
  animation-delay: var(--sm-delay, 0s);
  opacity: .34;
}
.sm-stage[data-weather="1"] .sm-ambient-flake { opacity: .58; }
.sm-stage[data-weather="2"] .sm-ambient-flake { opacity: .9; animation-duration: 4.8s; }
.sm-stage[data-weather="0"] .sm-ambient-flake,
.sm-stage[data-weather="3"] .sm-ambient-flake { opacity: .16; }
.sm-ambient-twinkle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,248,196,.9);
  box-shadow: 0 0 8px rgba(255,245,185,.75);
  animation: sm-twinkle var(--sm-twinkle, 3s) ease-in-out infinite;
  animation-delay: var(--sm-delay, 0s);
  opacity: 0;
}
.sm-stage[data-weather="4"] .sm-ambient-twinkle,
.sm-stage[data-weather="5"] .sm-ambient-twinkle { opacity: .8; }
@keyframes sm-ambient-fall {
  0% { transform: translate3d(0,-12%,0) rotate(0); }
  50% { transform: translate3d(18px,58vh,0) rotate(180deg); }
  100% { transform: translate3d(-10px,116vh,0) rotate(360deg); }
}
@keyframes sm-twinkle { 0%,100%{transform:scale(.55);opacity:.28} 50%{transform:scale(1.45);opacity:1} }

.sm-workshop-plaque {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  display: grid;
  gap: 1px;
  max-width: 154px;
  padding: 7px 11px 8px;
  border: 1px solid rgba(225,193,111,.72);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(12,47,45,.90), rgba(7,35,42,.94));
  color: #f8edc9;
  box-shadow: 0 7px 18px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.09);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  pointer-events: none;
}
.sm-workshop-plaque span {
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e2c66d;
}
.sm-workshop-plaque strong {
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: .025em;
}

/* Part changes make the Snow Friend acknowledge the child. The reactions are
   intentionally tiny so customization still feels immediate rather than gated
   by animation. */
.sm-character { transform-box: view-box; }
.sm-react-hat .sm-character { animation: sm-character-settle .58s cubic-bezier(.2,.8,.3,1); }
.sm-react-face .sm-head { animation: sm-face-nod .58s ease; }
.sm-react-scarf .sm-character { animation: sm-scarf-shiver .52s ease; }
.sm-react-arms .sm-character { animation: sm-arm-wiggle .62s ease; }
.sm-react-buttons .sm-character,
.sm-react-extras .sm-character { animation: sm-character-pop .52s ease; }
.sm-react-scene .sm-character { animation: sm-character-look .7s ease; }
@keyframes sm-character-settle { 0%{transform:translateY(-8px) scale(1.01)} 48%{transform:translateY(3px) scale(.995)} 100%{transform:none} }
@keyframes sm-face-nod { 0%,100%{transform:rotate(0)} 35%{transform:translateY(3px) rotate(4deg)} 65%{transform:translateY(-2px) rotate(-3deg)} }
@keyframes sm-scarf-shiver { 0%,100%{transform:none} 20%{transform:translateX(-3px) rotate(-1deg)} 40%{transform:translateX(3px) rotate(1deg)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }
@keyframes sm-arm-wiggle { 0%,100%{transform:none} 28%{transform:rotate(-2.5deg)} 58%{transform:rotate(2.5deg)} 78%{transform:rotate(-1deg)} }
@keyframes sm-character-pop { 0%,100%{transform:scale(1)} 45%{transform:scale(1.028)} }
@keyframes sm-character-look { 0%,100%{transform:none} 35%{transform:translateY(-3px) rotate(-1.5deg)} 70%{transform:translateY(0) rotate(1deg)} }
.sm-reaction-layer i {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 10px rgba(255,255,255,.9);
  opacity: 0;
}
.sm-reaction-layer.is-on i { animation: sm-burst .7s ease-out both; }
.sm-reaction-layer i:nth-child(1){--x:-72px;--y:-58px}.sm-reaction-layer i:nth-child(2){--x:64px;--y:-46px}.sm-reaction-layer i:nth-child(3){--x:-86px;--y:22px}.sm-reaction-layer i:nth-child(4){--x:82px;--y:34px}.sm-reaction-layer i:nth-child(5){--x:-34px;--y:-84px}.sm-reaction-layer i:nth-child(6){--x:38px;--y:-78px}
@keyframes sm-burst { 0%{opacity:0;transform:translate(0,0) scale(.4)} 20%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.15)} }

/* Surprise becomes a brief snowstorm reveal rather than an instantaneous state
   jump. It never blocks the final result and reduced-motion bypasses it. */
.sm-surprise-running::after {
  content: "";
  position: absolute;
  inset: -26%;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,.98) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 28%, rgba(255,255,255,.95) 0 4px, transparent 5px),
    radial-gradient(circle at 52% 66%, rgba(255,255,255,.98) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 72%, rgba(255,255,255,.92) 0 3px, transparent 4px),
    conic-gradient(from 30deg, rgba(255,255,255,.06), rgba(255,255,255,.88), rgba(207,232,252,.7), rgba(255,255,255,.10), rgba(255,255,255,.9));
  filter: blur(2px);
  animation: sm-surprise-storm 1.05s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes sm-surprise-storm {
  0% { opacity: 0; transform: rotate(0deg) scale(.75); }
  28% { opacity: .96; }
  58% { opacity: 1; transform: rotate(145deg) scale(1.08); }
  100% { opacity: 0; transform: rotate(300deg) scale(1.22); }
}

/* The live Snowman occasionally acknowledges Frosty Sleigh Ride. Only the
   grouped head layers move, so the body and handheld props remain planted. */
.sm-head { transform-box: view-box; }
.sm-head--left { --sm-bop-angle: -5deg; --sm-bop-counter: 2deg; }
.sm-head--right { --sm-bop-angle: 5deg; --sm-bop-counter: -2deg; }
.sm-head.is-bopping {
  animation: sm-head-bop 1.1s cubic-bezier(.36, .08, .25, 1);
}
@keyframes sm-head-bop {
  0%, 100% { transform: translateY(0) rotate(0); }
  18% { transform: translateY(-5px) rotate(var(--sm-bop-angle)); }
  38% { transform: translateY(1px) rotate(0); }
  58% { transform: translateY(-3px) rotate(var(--sm-bop-angle)); }
  78% { transform: translateY(0) rotate(var(--sm-bop-counter)); }
}

/* Sound and Start over mirror the Elf Training Map: a compact pair pinned to
   the stage's upper-right corner. Keeping them out of the lower action row
   prevents either control from covering Finish on narrow phones. */
.sm-stage-tools {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  gap: 7px;
}
.sm-stage-tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(200, 162, 74, .58);
  border-radius: 12px;
  background: rgba(5, 24, 45, .92);
  color: #e3c878;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .28);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.sm-stage-tool svg { width: 23px; height: 23px; }
@media (hover: hover) and (pointer: fine) {
  .sm-stage-tool:hover { background: rgba(200, 162, 74, .24); color: #fff; }
}
.sm-stage-tool:active { transform: scale(.95); }
.sm-stage-tool:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 162, 74, .55); }

/* The frequently used building actions remain below the artwork in one
   predictable thumb bar. */
.sm-commandbar {
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 8;
  width: min(100%, 560px);
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(213, 184, 95, .72);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18,61,56,.97), rgba(8,45,49,.98));
  box-shadow: 0 10px 26px rgba(5, 24, 45, .34), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}
.sm-tools {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  gap: 6px;
}
.sm-tool {
  flex: 1 1 0;
  min-width: 44px;
  min-height: 50px;
  padding: 5px 3px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 11px;
  border: 1px solid var(--sm-line);
  background: #fff;
  color: var(--sm-ink);
  cursor: pointer;
  font: inherit;
  transition: transform .12s ease, background .15s ease;
}
.sm-tool b { font-size: 19px; line-height: 1; font-weight: 400; }
.sm-tool em {
  font-style: normal;
  font-size: 9.5px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--sm-ink-soft);
}
@media (hover: hover) and (pointer: fine) {
  .sm-tool:hover:not(:disabled) { background: #f7fbff; transform: translateY(-1px); }
}
.sm-tool:active:not(:disabled) { transform: translateY(1px); }
.sm-tool:disabled { opacity: .38; cursor: default; }
.sm-tool:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 162, 74, .55); }

.sm-finish {
  flex: 0 0 auto;
  padding: 10px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #fffaf0;
  background: linear-gradient(180deg, #b73b3d, #8f272e);
  border: 1px solid rgba(255,225,155,.38);
  border-radius: 12px;
  cursor: pointer;
  min-height: 50px;
  box-shadow: 0 5px 13px rgba(68, 18, 26, .34);
}
@media (hover: hover) and (pointer: fine) {
  .sm-finish:hover { filter: brightness(1.06); }
}
.sm-finish:active { transform: translateY(1px); }
.sm-finish:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 162, 74, .6); }

/* ---------------- tray ---------------- */
.sm-tray {
  background:
    radial-gradient(circle at 92% 7%, rgba(213,184,95,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,253,246,.985), rgba(236,246,245,.985));
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(213, 184, 95, .48);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255,255,255,.8);
}
/* Eight categories are shown because Background and Weather share Scene. The
   simpler category model spends less space on navigation and more on choices. */
.sm-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--sm-line);
}
.sm-cat {
  min-width: 0;
  min-height: 62px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 14px;
  border: 2px solid var(--sm-line);
  background: var(--sm-frost);
  color: var(--sm-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.sm-cat-ico { font-size: 21px; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .sm-cat:hover { transform: translateY(-2px); }
}
.sm-cat:active { transform: translateY(1px); }
.sm-cat.is-on {
  /* The old cream fill measured 1.01:1 against the unselected frost -- the
     same luminance, so "which one is chosen" was carried by hue alone. */
  background: #ffe2a6;
  border-color: #8a6a1f;
  box-shadow: inset 0 0 0 1px #8a6a1f, 0 3px 0 rgba(138, 106, 31, .35);
}
.sm-cat:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 162, 74, .55); }

.sm-hint {
  margin: 0 2px 9px;
  font-size: 12.5px;
  color: var(--sm-ink-soft);
}

.sm-items { overflow: visible; }
.sm-choice-group + .sm-choice-group {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--sm-line);
}
.sm-group-title {
  margin: 0 2px 8px;
  color: #40536b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 9px;
}

/* A sticker shows the real item on the child's own snowman. */
.sm-sticker {
  padding: 6px 4px 7px;
  border-radius: 15px;
  border: 2px solid var(--sm-line);
  background: var(--sm-frost);
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.sm-sticker-art {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  pointer-events: none;
}
.sm-sticker-art svg { display: block; width: 100%; height: 100%; }
.sm-sticker-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sm-ink);
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .sm-sticker:hover { transform: translateY(-2px); border-color: #9fc4e6; }
}
.sm-sticker:active { transform: scale(0.97); border-color: #9fc4e6; }
.sm-sticker.is-on {
  border-color: #8a6a1f;
  background: #ffe2a6;
  box-shadow: inset 0 0 0 1px #8a6a1f, 0 3px 0 rgba(138, 106, 31, .35);
}
.sm-sticker:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 162, 74, .55); }
/* The little bounce that makes a tap feel like placing a sticker. */
.sm-sticker.is-pop { animation: smPop .26s ease; }
@keyframes smPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12) rotate(-2deg); }
  100% { transform: scale(1); }
}

/* ---------------- collection shelf ---------------- */
.sm-shelf {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 12px 14px 14px;
}
.sm-shelf h4 {
  margin: 0 0 9px;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold-200, #e3c878);
}
.sm-shelf-row {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 5px;
  -webkit-overflow-scrolling: touch;
}
.sm-shelf-item {
  flex: 0 0 auto;
  width: 92px;
  padding: 5px;
  border-radius: 13px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.94);
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sm-shelf-art {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 9px;
  overflow: hidden;
  pointer-events: none;
}
.sm-shelf-art svg { display: block; width: 100%; height: 100%; }
.sm-shelf-name {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--sm-ink);
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.sm-shelf-class {
  display: block;
  min-height: 22px;
  padding: 3px 4px 0;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .035em;
  color: #8a6a1f;
  text-align: center;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .sm-shelf-item:hover { transform: translateY(-2px); }
}
.sm-shelf-item:active { transform: scale(0.97); }
.sm-shelf-item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 162, 74, .55); }

/* ---------------- modal ---------------- */
.sm-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(8, 18, 30, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow-y: auto;
}
.sm-modal[hidden] { display: none; }
.sm-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #f6fbff, #e9f3fd);
  border-radius: 20px;
  padding: 26px 22px 22px;
  text-align: center;
  color: var(--sm-ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
}
.sm-modal-card h3 {
  margin: 0 0 14px;
  font-family: var(--display, Georgia, serif);
  font-size: 25px;
  color: #17457a;
}
.sm-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sm-line);
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  color: var(--sm-ink-soft);
  line-height: 1;
}
.sm-x:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 162, 74, .55); }

.sm-name-art, .sm-cert-art { width: 190px; margin: 0 auto 14px; }
.sm-name-art svg, .sm-cert-art svg {
  display: block; width: 100%; height: auto;
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}
.sm-modal-card input[type="text"] {
  width: 100%;
  max-width: 330px;
  padding: 13px 15px;
  font: inherit;
  font-size: 17px;
  text-align: center;
  border-radius: 12px;
  border: 2px solid var(--sm-line);
  background: #fff;
  color: var(--sm-ink);
}
.sm-modal-card input[type="text"]:focus {
  outline: none;
  border-color: var(--gold, #c8a24a);
  box-shadow: 0 0 0 3px rgba(200, 162, 74, .3);
}
.sm-or {
  margin: 12px 0;
  font-size: 13px;
  color: var(--sm-ink-soft);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.sm-btn {
  padding: 12px 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #1f7d4c, #14663c);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
}
.sm-btn--ghost {
  background: #fff;
  color: var(--sm-ink);
  border: 2px solid var(--sm-line);
}
.sm-btn--danger { background: linear-gradient(180deg, #b94239, #8f2f29); }
.sm-confirm-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7f3ff;
  color: #375b83;
  font-size: 36px;
}
.sm-confirm-copy {
  max-width: 390px;
  margin: 0 auto;
  color: var(--sm-ink-soft);
  font-size: 14px;
  line-height: 1.55;
}
@media (hover: hover) and (pointer: fine) {
  .sm-btn:hover { filter: brightness(1.05); }
}
.sm-btn:active { transform: translateY(1px); }
.sm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 162, 74, .6); }
.sm-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.sm-done-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.sm-btn--save { grid-column: 1 / -1; }
.sm-cert-preview {
  background: #fffdf6;
  border: 6px double var(--gold, #c8a24a);
  border-radius: 12px;
  padding: 16px 14px 14px;
}
/* Scoped to .sm-modal-card so it outranks `.sm-modal-card h3` (0,2,0 beats
   0,1,1). The banner is now a real <h3> -- the dialog needs a heading to be
   named -- and without this it would inherit that rule's 25px dark blue,
   which on the red banner is both oversized and close to unreadable. */
.sm-modal-card .sm-cert-banner {
  background: #c0392b;
  color: #fff;
  font-family: var(--display, Georgia, serif);
  font-size: 20px;
  padding: 8px 14px;
  border-radius: 7px;
  display: inline-block;
  margin: 0 0 13px;
}
.sm-cert-line { margin: 0; font-size: 14px; line-height: 1.55; color: #4b5a4f; }

/* Completion is now a reveal rather than an administrative certificate card.
   The child's exact Snow Friend stays central, then the personality and keepsake
   actions follow underneath. */
.sm-modal-card--finale {
  width: min(760px, 100%);
  padding: 18px;
  background:
    radial-gradient(circle at 50% -15%, rgba(255,243,182,.22), transparent 36%),
    linear-gradient(180deg, #0e3840 0 43%, #f7f0df 43% 100%);
}
.sm-modal-card--finale .sm-x {
  z-index: 8;
  background: rgba(8,35,42,.9);
  color: #f7e7af;
  border-color: rgba(213,184,95,.58);
}
.sm-finale {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(213,184,95,.58);
  background:
    linear-gradient(180deg, rgba(8,38,53,.20), rgba(13,55,62,.08)),
    url('../img/christmas-clock/snowman-clearing.webp') center 58% / cover no-repeat,
    #143f54;
  box-shadow: inset 0 0 42px rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.22);
}
.sm-finale::before {
  content: "";
  position: absolute;
  inset: auto -8% -19% -8%;
  height: 43%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #f8fcff, #dcebf1);
  box-shadow: 0 -10px 26px rgba(255,255,255,.34);
}
.sm-finale-art {
  position: absolute;
  inset: 12px 18% 4px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: sm-finale-arrive .85s cubic-bezier(.2,.8,.25,1) both;
}
.sm-finale-art svg {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
}
.sm-finale-sky {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.sm-finale-sky i {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff6c3;
  box-shadow: 0 0 12px rgba(255,246,195,.92);
  animation: sm-finale-spark 1.2s ease-out both;
}
.sm-finale-sky i:nth-child(1){--x:-150px;--y:-105px;animation-delay:.10s}
.sm-finale-sky i:nth-child(2){--x:148px;--y:-92px;animation-delay:.18s}
.sm-finale-sky i:nth-child(3){--x:-176px;--y:5px;animation-delay:.22s}
.sm-finale-sky i:nth-child(4){--x:174px;--y:12px;animation-delay:.27s}
.sm-finale-sky i:nth-child(5){--x:-92px;--y:-142px;animation-delay:.31s}
.sm-finale-sky i:nth-child(6){--x:96px;--y:-148px;animation-delay:.36s}
.sm-finale-stamp {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  width: 92px;
  height: 92px;
  display: grid;
  align-content: center;
  justify-items: center;
  border: 4px double rgba(151,38,42,.88);
  border-radius: 50%;
  color: #932a31;
  background: rgba(255,248,227,.86);
  transform: rotate(-10deg) scale(.2);
  opacity: 0;
  animation: sm-stamp-in .62s .58s cubic-bezier(.2,1.35,.3,1) forwards;
  text-transform: uppercase;
}
.sm-finale-stamp span { font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.sm-finale-stamp strong { font-size: 14px; line-height: 1.05; }
.sm-finale-copy {
  position: relative;
  z-index: 4;
  margin: 14px 8px 0;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(255,253,246,.96);
  box-shadow: 0 5px 16px rgba(12,36,42,.12);
}
.sm-finale-kicker {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8c6c1f;
}
.sm-modal-card--finale .sm-finale-copy h3 {
  margin: 0 0 8px;
  color: #123d38;
  font-size: clamp(24px, 4.8vw, 34px);
}
.sm-personality {
  margin: 0 0 5px;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5a6875;
}
.sm-personality strong {
  display: inline-block;
  margin-top: 3px;
  color: #a12f35;
  font-family: var(--display, Georgia, serif);
  font-size: 20px;
  letter-spacing: .01em;
  text-transform: none;
}
.sm-personality-note {
  max-width: 520px;
  margin: 6px auto 9px;
  color: #334d4b;
  font-size: 14px;
  line-height: 1.45;
}
.sm-modal-card--finale .sm-done-grid { margin: 12px 4px 2px; }
@keyframes sm-finale-arrive {
  0% { opacity: 0; transform: translateY(24px) scale(.92) rotate(-1.5deg); }
  62% { opacity: 1; transform: translateY(-5px) scale(1.015) rotate(.8deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes sm-finale-spark {
  0% { opacity: 0; transform: translate(0,0) scale(.25); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x),var(--y)) scale(1.35); }
}
@keyframes sm-stamp-in { to { opacity: .96; transform: rotate(-10deg) scale(1); } }

.sm-vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- wider screens ----------------
   Stage and tray sit side by side, and the stage sticks so the snowman
   stays in view while scrolling a long sticker list. */
@media (min-width: 900px) {
  .sm-app {
    grid-template-columns: minmax(320px, 1fr) minmax(390px, 1.1fr);
    grid-template-areas:
      "stage tray"
      "command tray"
      "shelf shelf";
    align-items: start;
  }
  .sm-stage      { grid-area: stage; width: min(100%, 46vh); }
  .sm-commandbar { grid-area: command; position: relative; bottom: auto; width: min(100%, 46vh); }
  .sm-tray       { grid-area: tray; }
  .sm-shelf      { grid-area: shelf; }
  .sm-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------- phones ---------------- */
/* ---------------- phone: swipeable rows ----------------
   Wrapping all nine categories cost three rows, and the sticker grid added
   several more, so the tray pushed everything into a long vertical scroll.
   On a phone both become single swipeable rows instead.

   The reason the original scrolling row failed its audit was not the scroll,
   it was that nothing showed there was more: a phone's overlay scrollbar is
   invisible at rest. So the edges fade only while there is something to
   scroll to, driven by .can-left / .can-right from snowman-ui.js. That is a
   real cue in the direction of travel, and it disappears at each end.

   Scoped to the whole single-column layout, not just portrait phones. A phone
   in landscape is ~844px wide, which sat above a 700px breakpoint and so fell
   back to the wrapped grid -- in the one orientation where vertical space is
   scarcest. Above 900px the layout is two columns and the tray has its own
   height to work with. */
@media (max-width: 899px) {
  .sm-cats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
  }
  .sm-cats::-webkit-scrollbar { display: none; }
  .sm-cat { flex: 0 0 auto; min-width: 78px; scroll-snap-align: center; }

  .sm-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
  }
  .sm-grid::-webkit-scrollbar { display: none; }
  .sm-sticker { flex: 0 0 90px; scroll-snap-align: center; }

  /* Fade whichever edge still has content beyond it. */
  .sm-cats.can-right, .sm-grid.can-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }
  .sm-cats.can-left, .sm-grid.can-left {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 34px);
    mask-image: linear-gradient(to right, transparent, #000 34px);
  }
  .sm-cats.can-left.can-right, .sm-grid.can-left.can-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  }
}

/* Every device uses the same bounded Workshop contract. The activity title
   consumes its natural row, the Snowman never leaves its pane, the action bar
   never leaves the editor, and only supplies and Snow Friends scroll. Screen
   shape changes the pane arrangement below, not the interaction behavior. */
.np-win.np-win--snowman {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.np-win.np-win--snowman .np-win-bar {
  position: relative;
  top: auto;
}

.np-win.np-win--snowman .np-win-body {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  max-width: none;
  padding: clamp(8px, 1.4vw, 18px);
  padding-bottom: max(clamp(8px, 1.4vw, 18px), env(safe-area-inset-bottom));
  overflow: hidden;
}

#snowman.in-window {
  height: 100%;
  padding: 0;
  overflow: hidden;
}

#snowman.in-window .sm-app {
  height: 100%;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "stage"
    "workspace";
  gap: 10px;
  overflow: hidden;
}

#snowman.in-window .sm-stage {
  grid-area: stage;
  position: relative;
  top: auto;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  align-self: stretch;
  background: linear-gradient(180deg,
    var(--sm-sky-top, var(--sm-frost)) 0%,
    var(--sm-sky-bottom, var(--sm-frost)) 84%,
    var(--sm-ground, #fff) 84%,
    var(--sm-ground, #fff) 100%);
}

#snowman.in-window .sm-workspace {
  grid-area: workspace;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 8px;
  overflow: hidden;
}

#snowman.in-window .sm-workspace-scroll {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #8a6a1f rgba(211, 224, 238, .7);
  -webkit-overflow-scrolling: touch;
}

#snowman.in-window .sm-workspace-scroll::-webkit-scrollbar { width: 12px; }
#snowman.in-window .sm-workspace-scroll::-webkit-scrollbar-track {
  background: rgba(211, 224, 238, .7);
  border-radius: 999px;
}
#snowman.in-window .sm-workspace-scroll::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: #8a6a1f;
  border: 3px solid rgba(211, 224, 238, .7);
  border-radius: 999px;
}
#snowman.in-window .sm-workspace-scroll:focus-visible {
  outline: 3px solid rgba(200, 162, 74, .55);
  outline-offset: -3px;
}

#snowman.in-window .sm-commandbar {
  grid-area: auto;
  position: relative;
  bottom: auto;
  z-index: auto;
  width: 100%;
  margin: 0;
}

#snowman.in-window .sm-tray,
#snowman.in-window .sm-shelf {
  grid-area: auto;
}

/* Landscape screens and wide desktops place the same two panes side by side.
   The editor still owns the only vertical scrollbar. */
@media (orientation: landscape), (min-width: 1200px) {
  #snowman.in-window .sm-app {
    grid-template-columns: minmax(0, .9fr) minmax(330px, 1.1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "stage workspace";
  }
  #snowman.in-window .sm-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Very narrow landscape phones keep all three 46px stage controls accessible
   by stacking them in the same upper-right corner. */
@media (orientation: landscape) and (max-width: 600px) {
  #snowman.in-window .sm-stage-tools {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .sm-stage { width: min(100%, 38vh); }
  .sm-commandbar {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    border-radius: 14px;
  }
  .sm-tools { display: contents; }
  .sm-tool { min-width: 0; min-height: 46px; padding-inline: 2px; }
  .sm-tool b { font-size: 17px; }
  .sm-tool em { font-size: 8.5px; }
  .sm-finish { min-width: 0; min-height: 46px; padding: 5px 2px; font-size: 13px; }

  .sm-tray { padding: 11px; }
  .sm-tray-head { align-items: start; flex-direction: column; gap: 5px; margin-bottom: 10px; }
  .sm-tray-head h4 { font-size: 20px; }
  .sm-tray-head p { max-width: none; text-align: left; font-size: 11.5px; }
  .sm-cat { min-height: 52px; padding: 6px 8px; font-size: 11px; }
  .sm-cat-ico { font-size: 18px; }
  .sm-cat-name { line-height: 1.15; }

  .sm-sticker { flex-basis: 84px; }
  .sm-done-grid { grid-template-columns: 1fr; }
  .sm-modal-card { padding: 22px 16px 18px; }
  .sm-modal-card h3 { font-size: 21px; }
  .sm-modal-card--finale { padding: 10px; }
  .sm-finale { min-height: 250px; }
  .sm-finale-art { inset: 8px 12% 2px; }
  .sm-finale-stamp { width: 72px; height: 72px; right: 9px; bottom: 9px; border-width: 3px; }
  .sm-finale-stamp strong { font-size: 11px; }
  .sm-finale-copy { margin: 8px 2px 0; padding: 10px 9px; }
  .sm-personality strong { font-size: 17px; }
  .sm-personality-note { font-size: 12.5px; }
  .sm-workshop-plaque { max-width: 126px; padding: 6px 9px 7px; }
  .sm-workshop-plaque strong { font-size: 10px; }
}

/* Short landscape phones and small landscape tablets have enough width for
   two columns but very little height. Keeping the portrait stack here made the
   43vh stage roughly 168px wide on an 844x390 phone while half the screen sat
   unused. Use a compact stage/tray split, retaining the swipeable rows above. */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 899px) and (max-height: 560px) {
  .sm-app {
    grid-template-columns: minmax(230px, .9fr) minmax(320px, 1.1fr);
    grid-template-areas:
      "stage tray"
      "command tray"
      "shelf shelf";
    align-items: start;
    gap: 10px;
  }
  .sm-stage { grid-area: stage; width: min(100%, 56vh); }
  .sm-commandbar { grid-area: command; position: relative; bottom: auto; width: 100%; }
  .sm-tray  { grid-area: tray; }
  .sm-shelf { grid-area: shelf; }
  .sm-tray-head { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-sticker, .sm-cat, .sm-tool, .sm-stage-tool, .sm-shelf-item { transition: none; }
  .sm-sticker.is-pop,
  .sm-react-hat .sm-character,
  .sm-react-face .sm-head,
  .sm-react-scarf .sm-character,
  .sm-react-arms .sm-character,
  .sm-react-buttons .sm-character,
  .sm-react-extras .sm-character,
  .sm-react-scene .sm-character,
  .sm-reaction-layer.is-on i,
  .sm-ambient-flake,
  .sm-ambient-twinkle,
  .sm-finale-art,
  .sm-finale-sky i,
  .sm-finale-stamp,
  .sm-surprise-running::after { animation: none; }
  .sm-head.is-bopping { animation: none; }
  .sm-head, .sm-character { transform: none; }
  .sm-reaction-layer { display: none; }
  .sm-ambient-flake { opacity: .14; }
  .sm-finale-stamp { opacity: .96; transform: rotate(-10deg) scale(1); }
}

/* ============================================================
   CINEMATIC WORKSHOP V2
   Feature-animation composition: painted environment, dimensional character,
   and a diegetic evergreen/brass workbench instead of a white web-app tray.
   ============================================================ */

#snowman.in-window .sm-app {
  gap: clamp(8px, 1vw, 14px);
  grid-template-rows: minmax(0, 1.16fr) minmax(0, .84fr);
}

#snowman.in-window .sm-stage {
  isolation: isolate;
  border: 1px solid rgba(237, 215, 151, .52);
  background-color: #16384a;
  background-size: cover;
  background-position: center 56%;
  box-shadow:
    0 20px 55px rgba(0, 0, 0, .34),
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 -80px 120px rgba(5, 23, 38, .18);
}

/* Reuse approved North Pole photography-style story art. Different scene states
   are camera/color treatments of the shipped environments until dedicated
   cinematic plates are commissioned. */
#snowman.in-window .sm-stage[data-scene="0"] {
  background-image:
    linear-gradient(180deg, rgba(28,15,8,.02), rgba(25,13,7,.10)),
    url('../img/snowman-cinematic/study-desktop.webp');
  background-position: center center;
}
#snowman.in-window .sm-stage[data-scene="1"] {
  background-image:
    linear-gradient(180deg, rgba(7,24,54,.02), rgba(7,24,54,.08)),
    url('../img/snowman-cinematic/village-desktop.webp');
  background-position: center center;
}
#snowman.in-window .sm-stage[data-scene="2"] {
  background-image:
    linear-gradient(180deg, rgba(5,16,46,.03), rgba(8,20,48,.10)),
    url('../img/snowman-cinematic/party-desktop.webp');
  background-position: center center;
}
#snowman.in-window .sm-stage[data-scene="3"] {
  background-image:
    linear-gradient(180deg, rgba(113,201,235,.16), rgba(13,83,112,.19)),
    url('../img/christmas-clock/snowman-clearing.webp');
  background-position: 68% 58%;
}
#snowman.in-window .sm-stage[data-scene="4"] {
  background-image:
    url('../img/christmas-clock/decorations.webp'),
    linear-gradient(180deg, rgba(137,42,62,.08), rgba(55,20,45,.18)),
    url('../img/christmas-clock/snowman-clearing.webp');
  background-size: 150% auto, cover, cover;
  background-position: 50% 22%, center, center 58%;
  background-repeat: no-repeat;
}
#snowman.in-window .sm-stage[data-scene="5"] {
  background-image:
    linear-gradient(180deg, rgba(43,20,8,.04), rgba(29,13,7,.18)),
    url('../img/christmas-clock/santa-workshop.webp');
  background-position: center 52%;
}
/* Camera grade and motivated practical light live behind the character. */
#snowman.in-window .sm-stage-ambient {
  z-index: 1;
}
#snowman.in-window .sm-stage-ambient::before,
#snowman.in-window .sm-stage-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#snowman.in-window .sm-stage-ambient::before {
  background:
    radial-gradient(ellipse at 50% 43%, transparent 20%, rgba(4,18,31,.06) 58%, rgba(4,18,31,.42) 112%),
    linear-gradient(90deg, rgba(8,23,31,.16), transparent 24% 76%, rgba(8,23,31,.18));
}
#snowman.in-window .sm-stage-ambient::after {
  inset: -15% 42% 35% -12%;
  background: radial-gradient(ellipse, rgba(255,218,149,.21), rgba(255,218,149,0) 67%);
  transform: rotate(-12deg);
  filter: blur(4px);
}

/* Weather is a cinematic scene layer now, not a tiny state change inside the
   retired procedural SVG background. Every weather choice visibly changes the
   shot while remaining independent of the selected painted environment. */
#snowman.in-window .sm-weather-grade,
#snowman.in-window .sm-weather-sun,
#snowman.in-window .sm-weather-stars,
#snowman.in-window .sm-weather-aurora,
#snowman.in-window .sm-weather-squall {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
}
#snowman.in-window .sm-weather-grade { z-index: 2; }
#snowman.in-window .sm-weather-sun,
#snowman.in-window .sm-weather-stars,
#snowman.in-window .sm-weather-aurora,
#snowman.in-window .sm-weather-squall { z-index: 3; }

/* Clear really is clear. Snow is opt-in instead of faintly present everywhere. */
#snowman.in-window .sm-stage[data-weather="0"] .sm-ambient-flake,
#snowman.in-window .sm-stage[data-weather="3"] .sm-ambient-flake,
#snowman.in-window .sm-stage[data-weather="4"] .sm-ambient-flake,
#snowman.in-window .sm-stage[data-weather="5"] .sm-ambient-flake { opacity: 0; }
#snowman.in-window .sm-stage[data-weather="1"] .sm-ambient-flake { opacity: .62; }
#snowman.in-window .sm-stage[data-weather="2"] .sm-ambient-flake {
  opacity: .95;
  animation-duration: 4.1s;
  filter: blur(.15px) drop-shadow(0 0 4px rgba(255,255,255,.72));
}

/* Sunset: warm directional sun plus a full-frame amber/magenta grade. */
#snowman.in-window .sm-stage[data-weather="3"] .sm-weather-grade {
  opacity: .78;
  background:
    linear-gradient(180deg, rgba(246,111,75,.26), rgba(255,186,107,.12) 44%, rgba(92,57,112,.16)),
    linear-gradient(90deg, rgba(255,148,69,.18), transparent 55%);
  mix-blend-mode: screen;
}
#snowman.in-window .sm-stage[data-weather="3"] .sm-weather-sun {
  opacity: .92;
  inset: -10% 52% 52% -12%;
  background: radial-gradient(circle, rgba(255,231,170,.82) 0 8%, rgba(255,174,87,.32) 28%, transparent 67%);
  filter: blur(2px);
}

/* Starry night: cool the plate, then add a real star field rather than three
   decorative dots. */
#snowman.in-window .sm-stage[data-weather="4"] .sm-weather-grade {
  opacity: .86;
  background: linear-gradient(180deg, rgba(4,12,39,.56), rgba(8,20,49,.24) 58%, rgba(8,18,38,.10));
  mix-blend-mode: multiply;
}
#snowman.in-window .sm-stage[data-weather="4"] .sm-weather-stars {
  opacity: .96;
  inset: 0 0 38%;
  background-image:
    radial-gradient(circle at 8% 18%, #fff8d8 0 1.5px, transparent 2px),
    radial-gradient(circle at 18% 41%, #fff 0 1px, transparent 1.7px),
    radial-gradient(circle at 29% 12%, #dfeaff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 43% 29%, #fff8d8 0 1.4px, transparent 2px),
    radial-gradient(circle at 57% 10%, #fff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 66% 37%, #dfeaff 0 1px, transparent 1.7px),
    radial-gradient(circle at 78% 19%, #fff8d8 0 1.5px, transparent 2px),
    radial-gradient(circle at 91% 34%, #fff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 52% 48%, #fff 0 1px, transparent 1.7px),
    radial-gradient(circle at 35% 55%, #dfeaff 0 1.1px, transparent 1.8px);
  filter: drop-shadow(0 0 5px rgba(210,228,255,.45));
  animation: sm-weather-stars 4.2s ease-in-out infinite alternate;
}

/* Aurora: visible animated curtains across the upper half of any environment. */
#snowman.in-window .sm-stage[data-weather="5"] .sm-weather-grade {
  opacity: .58;
  background: linear-gradient(180deg, rgba(5,18,52,.34), rgba(8,31,57,.10) 64%, transparent);
}
#snowman.in-window .sm-stage[data-weather="5"] .sm-weather-aurora {
  opacity: .88;
  inset: -10% -14% 35%;
  background:
    linear-gradient(112deg, transparent 4%, rgba(72,236,174,.08) 15%, rgba(82,246,183,.72) 29%, rgba(116,193,255,.18) 42%, transparent 53%),
    linear-gradient(72deg, transparent 18%, rgba(100,161,255,.12) 29%, rgba(80,239,192,.68) 45%, rgba(148,115,244,.26) 58%, transparent 72%);
  filter: blur(7px) saturate(1.28);
  transform: skewX(-10deg) scale(1.08);
  animation: sm-weather-aurora 8s ease-in-out infinite alternate;
}
#snowman.in-window .sm-stage[data-weather="5"] .sm-weather-stars { opacity: .42; }

/* Big Snow gets a second foreground squall above the Snow Friend. This is the
   visual distinction the old implementation was missing. */
#snowman.in-window .sm-stage[data-weather="2"] .sm-weather-squall {
  opacity: .72;
  inset: -8%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.96) 0 2.4px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,.86) 0 1.7px, transparent 2.3px),
    radial-gradient(circle, rgba(255,255,255,.72) 0 3px, transparent 3.7px);
  background-size: 74px 92px, 103px 128px, 151px 171px;
  background-position: 4px -20px, 41px -62px, 83px -105px;
  filter: blur(.35px);
  animation: sm-weather-squall 2.7s linear infinite;
}

/* Put the heavy-snow foreground pass in front of the character without moving
   the rest of the weather layer above hats/faces. */
#snowman.in-window .sm-stage[data-weather="2"] .sm-reaction-layer::before {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: .38;
  background-image:
    radial-gradient(circle, #fff 0 2.2px, transparent 2.8px),
    radial-gradient(circle, rgba(255,255,255,.86) 0 1.4px, transparent 2px);
  background-size: 91px 111px, 137px 153px;
  background-position: 16px -28px, 61px -77px;
  animation: sm-weather-squall-front 2.2s linear infinite;
}

@keyframes sm-weather-stars {
  from { transform: translateY(0); filter: brightness(.88) drop-shadow(0 0 4px rgba(210,228,255,.35)); }
  to { transform: translateY(1px); filter: brightness(1.18) drop-shadow(0 0 7px rgba(210,228,255,.58)); }
}
@keyframes sm-weather-aurora {
  from { transform: skewX(-10deg) translateX(-3%) scale(1.08); opacity: .72; }
  to { transform: skewX(-5deg) translateX(4%) scale(1.12); opacity: .96; }
}
@keyframes sm-weather-squall {
  from { transform: translate3d(-12px,-42px,0); }
  to { transform: translate3d(28px,108px,0); }
}
@keyframes sm-weather-squall-front {
  from { transform: translate3d(-18px,-52px,0); }
  to { transform: translate3d(34px,128px,0); }
}

#snowman.in-window .sm-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}
#snowman.in-window .sm-canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  transform-origin: center bottom;
  filter: saturate(1.02) contrast(1.015);
}
#snowman.in-window .sm-character {
  transform-origin: 50% 91%;
}
#snowman.in-window .sm-snowball {
  filter: saturate(.94);
}
#snowman.in-window .sm-face-layer {
  filter: drop-shadow(0 1px .7px rgba(20,30,38,.24));
}

#snowman.in-window .sm-reaction-layer { z-index: 4; }
#snowman.in-window .sm-stage-tools { z-index: 7; }
#snowman.in-window .sm-workshop-plaque {
  z-index: 6;
  left: 13px;
  bottom: 13px;
  min-width: 136px;
  padding: 8px 12px 9px;
  border: 1px solid rgba(225,193,111,.72);
  border-radius: 9px;
  background:
    linear-gradient(100deg, rgba(255,255,255,.06), transparent 25%),
    linear-gradient(180deg, rgba(15,57,49,.94), rgba(6,37,38,.97));
  box-shadow:
    0 7px 18px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -8px 15px rgba(0,0,0,.12);
}
#snowman.in-window .sm-workshop-plaque span {
  color: #e9ce7c;
  font-size: 8px;
  letter-spacing: .16em;
}
#snowman.in-window .sm-workshop-plaque strong {
  color: #fff6da;
  font-size: 11.5px;
}

/* Workbench: dark carved surface, brass trim, frosted prop wells. */
#snowman.in-window .sm-workspace {
  border: 1px solid rgba(213,184,95,.46);
  border-radius: 18px;
  padding: 9px;
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 85% 5%, rgba(210,174,93,.12), transparent 34%),
    linear-gradient(145deg, rgba(17,58,52,.98), rgba(6,35,39,.99) 70%);
  box-shadow:
    0 16px 35px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -25px 45px rgba(0,0,0,.18);
}
#snowman.in-window .sm-commandbar {
  border-color: rgba(222,192,111,.58);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(33,78,67,.96), rgba(13,53,50,.98));
  box-shadow:
    0 7px 18px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08);
}
#snowman.in-window .sm-tool {
  color: #f8edce;
  border-color: rgba(222,192,111,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#snowman.in-window .sm-tool em { color: rgba(248,237,206,.76); }
#snowman.in-window .sm-tool:disabled { opacity: .34; }
@media (hover:hover) and (pointer:fine) {
  #snowman.in-window .sm-tool:hover:not(:disabled) {
    color: #fff9e9;
    background: rgba(222,192,111,.12);
  }
}
#snowman.in-window .sm-finish {
  color: #fff8e8;
  border-color: rgba(255,220,154,.44);
  background: linear-gradient(180deg, #c34445, #8e262f);
  box-shadow: 0 5px 14px rgba(58,14,22,.36), inset 0 1px 0 rgba(255,255,255,.17);
}

#snowman.in-window .sm-workspace-scroll {
  padding: 0 2px max(9px, env(safe-area-inset-bottom));
  scrollbar-color: #d0ae56 rgba(4,29,31,.36);
}
#snowman.in-window .sm-tray {
  padding: 11px;
  border-color: rgba(223,196,124,.34);
  background:
    radial-gradient(circle at 90% 0, rgba(223,196,124,.10), transparent 28%),
    linear-gradient(180deg, rgba(11,48,47,.86), rgba(6,34,38,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.18);
}
#snowman.in-window .sm-cats {
  gap: 7px;
  padding-bottom: 10px;
  margin-bottom: 11px;
  border-bottom-color: rgba(222,193,117,.23);
}
#snowman.in-window .sm-cat {
  min-height: 60px;
  border: 1px solid rgba(216,190,123,.34);
  border-radius: 13px;
  color: #f6ecd2;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.08), transparent 38%),
    linear-gradient(180deg, rgba(28,73,64,.88), rgba(11,49,47,.94));
  box-shadow: 0 4px 9px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
#snowman.in-window .sm-cat-ico {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #e9cf82;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.22));
}
#snowman.in-window .sm-cat-ico svg { width: 23px; height: 23px; display:block; }
#snowman.in-window .sm-cat.is-on .sm-cat-ico { color:#1f4a43; filter:none; }
#snowman.in-window .sm-cat.is-on {
  color: #1a3c38;
  border-color: #dfc36f;
  background: linear-gradient(180deg, #f5df9b, #d6b65d);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 4px 11px rgba(0,0,0,.22),
    0 0 0 1px rgba(223,195,111,.30);
}
#snowman.in-window .sm-group-title,
#snowman.in-window .sm-hint { color: rgba(244,235,209,.74); }

#snowman.in-window .sm-grid { gap: 9px; }
#snowman.in-window .sm-sticker {
  border: 1px solid rgba(211,189,130,.28);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(5,31,35,.70);
  box-shadow: 0 5px 12px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
#snowman.in-window .sm-sticker-art {
  position: relative;
  border: 1px solid rgba(220,207,173,.30);
  background:
    radial-gradient(circle at 42% 30%, rgba(255,255,255,.96), rgba(224,239,242,.96) 58%, rgba(160,188,195,.85) 100%);
  box-shadow:
    inset 0 5px 18px rgba(255,255,255,.36),
    inset 0 -10px 20px rgba(50,94,103,.12);
}
#snowman.in-window .sm-sticker-art svg {
  filter: drop-shadow(0 4px 4px rgba(22,52,67,.22));
}
#snowman.in-window .sm-sticker-name {
  color: #f8efd7;
  font-size: 11px;
}
#snowman.in-window .sm-sticker.is-on {
  border-color: #e5c86e;
  background:
    linear-gradient(180deg, rgba(225,194,105,.22), rgba(177,137,51,.10)),
    rgba(14,48,45,.90);
  box-shadow:
    inset 0 0 0 1px rgba(255,234,175,.18),
    0 0 0 2px rgba(221,191,105,.55),
    0 7px 16px rgba(0,0,0,.25);
}
#snowman.in-window .sm-sticker.is-on .sm-sticker-name { color: #ffe9a8; }

/* Cinematic environment thumbnails. */
.sm-scene-preview,
.sm-weather-preview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-size: cover;
  background-position: center;
}
.sm-scene-preview[data-scene-preview="0"] { background-image: url('../img/snowman-cinematic/study-desktop.webp'); background-position:center; }
.sm-scene-preview[data-scene-preview="1"] { background-image: url('../img/snowman-cinematic/village-desktop.webp'); background-position:center; }
.sm-scene-preview[data-scene-preview="2"] { background-image: url('../img/snowman-cinematic/party-desktop.webp'); background-position:center; }
.sm-scene-preview[data-scene-preview="3"] { background-image: linear-gradient(rgba(101,205,238,.18),rgba(23,108,142,.18)),url('../img/christmas-clock/snowman-clearing.webp'); background-position:70% 55%; }
.sm-scene-preview[data-scene-preview="4"] { background-image: url('../img/christmas-clock/decorations.webp'),url('../img/christmas-clock/snowman-clearing.webp'); background-size:170% auto,cover; background-position:50% 24%,center; background-repeat:no-repeat; }
.sm-scene-preview[data-scene-preview="5"] { background-image: url('../img/christmas-clock/santa-workshop.webp'); }

.sm-weather-preview {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,#b9ddf2,#eef8ff 66%,#f8fcff 66%);
}
.sm-weather-preview::before,
.sm-weather-preview::after,
.sm-weather-preview i {
  content:"";
  position:absolute;
  pointer-events:none;
}
.sm-weather-preview[data-weather-preview="0"]::before { width:28px;height:28px;border-radius:50%;right:12px;top:10px;background:#f6cf72;box-shadow:0 0 15px #f6cf7280; }
.sm-weather-preview[data-weather-preview="1"] i,
.sm-weather-preview[data-weather-preview="2"] i { width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:20px 17px 0 #fff,-19px 28px 0 #fff,9px 42px 0 #fff; }
.sm-weather-preview[data-weather-preview="1"] i:nth-child(1){left:24%;top:12%}.sm-weather-preview[data-weather-preview="1"] i:nth-child(2){left:62%;top:24%}.sm-weather-preview[data-weather-preview="1"] i:nth-child(3){left:44%;top:52%}
.sm-weather-preview[data-weather-preview="2"] i { width:8px;height:8px;box-shadow:17px 12px 0 #fff,-16px 20px 0 #fff,8px 35px 0 #fff,-4px 48px 0 #fff; }
.sm-weather-preview[data-weather-preview="2"] i:nth-child(1){left:20%;top:7%}.sm-weather-preview[data-weather-preview="2"] i:nth-child(2){left:62%;top:14%}.sm-weather-preview[data-weather-preview="2"] i:nth-child(3){left:44%;top:47%}
.sm-weather-preview[data-weather-preview="3"] { background:linear-gradient(180deg,#e99375,#f5c388 48%,#6f84b0 100%); }
.sm-weather-preview[data-weather-preview="3"]::before { width:32px;height:32px;border-radius:50%;left:14px;bottom:17px;background:#ffe0a0;box-shadow:0 0 17px #ffd490; }
.sm-weather-preview[data-weather-preview="4"] { background:linear-gradient(180deg,#172a59 0%,#2a4775 58%,#355887 100%); }
.sm-weather-preview[data-weather-preview="4"]::before { inset:7px;background-image:radial-gradient(circle,#fff7c7 0 1.5px,transparent 2px);background-size:20px 18px; }
.sm-weather-preview[data-weather-preview="5"] { background:linear-gradient(180deg,#142a58 0%,#1d3f68 58%,#244f73 100%); }
.sm-weather-preview[data-weather-preview="5"]::before { inset:-10% -15% 30%;background:linear-gradient(120deg,transparent 10%,rgba(73,238,176,.62) 38%,rgba(121,171,249,.50) 58%,transparent 80%);filter:blur(4px);transform:skewX(-12deg); }

#snowman.in-window .sm-shelf {
  border-color: rgba(218,190,118,.32);
  background: rgba(5,31,34,.72);
}
#snowman.in-window .sm-shelf h4 { color: #e5ca79; }
#snowman.in-window .sm-shelf-item {
  border-color: rgba(220,194,125,.38);
  background: linear-gradient(180deg,#f8f4e7,#e7f0ed);
}

@media (orientation: landscape), (min-width: 1200px) {
  #snowman.in-window .sm-app {
    grid-template-columns: minmax(0, 1.28fr) minmax(360px, .72fr);
    grid-template-rows: minmax(0, 1fr);
  }
  #snowman.in-window .sm-canvas svg { max-width: none; }
  #snowman.in-window .sm-cats { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #snowman.in-window .sm-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (orientation: landscape) and (max-height: 560px) {
  #snowman.in-window .sm-app {
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
    grid-template-rows: minmax(0,1fr);
  }
  #snowman.in-window .sm-workspace { padding: 6px; }
  #snowman.in-window .sm-tray { padding: 8px; }
  #snowman.in-window .sm-cat { min-height: 50px; }
  #snowman.in-window .sm-canvas svg { width:100%; height:100%; max-width:none; }
}

@media (max-width: 560px) {
  #snowman.in-window .sm-app { grid-template-rows:minmax(0,1.12fr) minmax(0,.88fr); }
  #snowman.in-window .sm-stage { border-radius: 16px; }
  #snowman.in-window .sm-workspace { border-radius: 16px; padding: 6px; }
  #snowman.in-window .sm-canvas { padding-inline: 1%; }
  #snowman.in-window .sm-canvas svg { width:100%; height:100%; max-width:none; }
  #snowman.in-window .sm-workshop-plaque { left:8px;bottom:8px;min-width:0;max-width:120px;padding:6px 8px 7px; }
  #snowman.in-window .sm-workshop-plaque span { font-size:7px; }
  #snowman.in-window .sm-workshop-plaque strong { font-size:9.5px; }
  #snowman.in-window .sm-cat { min-height:50px; }
  #snowman.in-window .sm-sticker { flex-basis:88px; }
}

@media (min-width: 600px) and (max-width: 1199px) {
  #snowman.in-window .sm-stage[data-scene="0"] {
    background-image: linear-gradient(180deg,rgba(28,15,8,.02),rgba(25,13,7,.10)),url('../img/snowman-cinematic/study-tablet.webp');
  }
  #snowman.in-window .sm-stage[data-scene="1"] {
    background-image: linear-gradient(180deg,rgba(7,24,54,.02),rgba(7,24,54,.08)),url('../img/snowman-cinematic/village-tablet.webp');
  }
  #snowman.in-window .sm-stage[data-scene="2"] {
    background-image: linear-gradient(180deg,rgba(5,16,46,.03),rgba(8,20,48,.10)),url('../img/snowman-cinematic/party-tablet.webp');
  }
}

@media (max-width: 599px) {
  #snowman.in-window .sm-stage[data-scene="0"] {
    background-image: linear-gradient(180deg,rgba(28,15,8,.02),rgba(25,13,7,.10)),url('../img/snowman-cinematic/study-mobile.webp');
  }
  #snowman.in-window .sm-stage[data-scene="1"] {
    background-image: linear-gradient(180deg,rgba(7,24,54,.02),rgba(7,24,54,.08)),url('../img/snowman-cinematic/village-mobile.webp');
  }
  #snowman.in-window .sm-stage[data-scene="2"] {
    background-image: linear-gradient(180deg,rgba(5,16,46,.03),rgba(8,20,48,.10)),url('../img/snowman-cinematic/party-mobile.webp');
  }
}

@media (prefers-reduced-motion: reduce) {
  #snowman.in-window .sm-canvas svg { transform:none; }
  #snowman.in-window .sm-stage-ambient::after { filter:none; }
  #snowman.in-window .sm-weather-stars,
  #snowman.in-window .sm-weather-aurora,
  #snowman.in-window .sm-weather-squall,
  #snowman.in-window .sm-stage[data-weather="2"] .sm-reaction-layer::before { animation:none; }
}