/* Each sprite is a transparent 3 × 3 sheet with square, aligned cells. The
   layout engine only uses empty perimeter space; it never shifts the cards. */
.draw-companions{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none;contain:layout paint}
.draw-companions *{pointer-events:none}
.draw-stage.has-draw-companions>.draw-stage-body{z-index:1}
/* The night the audience gathers in (2026-10-08 polish, after the owner found the first cut flat): static star dust,
   a handful of gold stars with their halo placed by the layout engine clear of the controls, the woodland corners
   dimmed and desaturated like an out-of-focus foreground (no blur: the costliest filter on phones), a soft shadow under every animal, and a vignette above them
   that sinks their outer edges into the dark so they sit in the scene instead of on it. All static: the stage keeps
   no standing CSS animation (delight.js's budget). */
.dc-dust{position:absolute;inset:0;z-index:0;background-image:
  radial-gradient(circle at 12% 18%,rgb(var(--on-accent-rgb) / .75) 0 .9px,transparent 1.6px),
  radial-gradient(circle at 63% 71%,rgb(var(--night-star-rgb) / .8) 0 1.1px,transparent 1.9px),
  radial-gradient(circle at 81% 33%,rgb(var(--on-accent-rgb) / .5) 0 .8px,transparent 1.4px),
  radial-gradient(circle at 37% 52%,rgb(var(--night-star-rgb) / .55) 0 .9px,transparent 1.6px),
  radial-gradient(circle at 54% 12%,rgb(var(--on-accent-rgb) / .3) 0 1.6px,transparent 2.8px),
  radial-gradient(circle at 26% 84%,rgb(var(--night-star-rgb) / .35) 0 1.8px,transparent 3.2px);
  background-size:211px 173px,263px 241px,149px 127px,331px 293px,389px 347px,457px 419px}
.dc-star{position:absolute;z-index:0;display:block;width:var(--dc-star,24px);height:var(--dc-star,24px);margin:calc(var(--dc-star,24px) / -2) 0 0 calc(var(--dc-star,24px) / -2);border-radius:50%;background:radial-gradient(circle,rgb(var(--night-star-rgb) / .5),rgb(var(--night-star-rgb) / .14) 42%,transparent 70%)}
.dc-star[hidden]{display:none}
.dc-star::after{content:'';position:absolute;inset:24%;background:var(--night-star);-webkit-mask: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 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6-4.4-4.2 6-.8z' stroke='currentColor' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask: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 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6-4.4-4.2 6-.8z' stroke='currentColor' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.dc-woodland{position:absolute;inset:0;z-index:0;pointer-events:none;filter:brightness(.78) saturate(.85)}
.dc-vignette{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse 74% 70% at 50% 46%,transparent 56%,rgb(var(--stage-rgb) / .62))}
/* Portrait phones: the foreground animals' bodies fade into the night behind the thumb buttons. */
@media(max-width:600px) and (max-aspect-ratio:1/1){.dc-vignette{background:linear-gradient(to top,rgb(var(--stage-rgb) / .85),rgb(var(--stage-rgb) / .35) 12%,transparent 24%),radial-gradient(ellipse 80% 74% at 50% 46%,transparent 58%,rgb(var(--stage-rgb) / .55))}}
.dc-woodland-corner{position:absolute;display:block;width:min(30%,380px);aspect-ratio:1;background-image:url('/static/mascot/draw-woodland-v1.webp');background-repeat:no-repeat;background-size:200% 200%}
.dc-woodland-tl{top:0;left:0;background-position:0% 0%}
.dc-woodland-tr{top:0;right:0;background-position:100% 0%}
.dc-woodland-bl{bottom:0;left:0;background-position:0% 100%}
.dc-woodland-br{bottom:0;right:0;background-position:100% 100%}
/* Not clipped: each sprite fills its square, and a clipped seat would cut its shadow off into a visible box. The eyes
   are held to their own small windows by their masks. */
.draw-companion{position:absolute;z-index:1;display:block;aspect-ratio:1}
.draw-companion[hidden]{display:none}
/* A permanent neutral body sits beneath two small feathered eye windows.
   The nose, mouth, ears, scarf and paws never swap with generated frames. */
.dc-turn,.dc-look,.dc-base,.dc-face,.dc-sprite{position:absolute;display:block;inset:0}
.dc-turn{transform-origin:50% 50%}
.dc-look{transform-origin:50% 68%}
.dc-base{background-image:var(--dc-body);background-repeat:no-repeat;background-size:300% 200%;background-position:0% 0%;filter:drop-shadow(0 12px 14px rgb(var(--stage-rgb) / .75))}
.dc-sprite{background-image:var(--dc-atlas);background-repeat:no-repeat;background-size:300% 300%;background-position:var(--dc-x,0%) var(--dc-y,0%);transform-origin:0 0}
.dc-face{-webkit-mask-image:radial-gradient(ellipse var(--dc-eye-w) var(--dc-eye-h) at var(--dc-eye-x) var(--dc-eye-y),var(--mask-solid) 78%,transparent);mask-image:radial-gradient(ellipse var(--dc-eye-w) var(--dc-eye-h) at var(--dc-eye-x) var(--dc-eye-y),var(--mask-solid) 78%,transparent)}
.dc-shiba{--dc-body:url('/static/mascot/draw-shiba-v2.webp');--dc-atlas:url('/static/mascot/draw-shiba-v3.webp')}
.dc-shiba .dc-eye-0{--dc-eye-x:55.3%;--dc-eye-y:70.2%;--dc-eye-w:7.8%;--dc-eye-h:7%}
.dc-shiba .dc-eye-1{--dc-eye-x:79.4%;--dc-eye-y:60.2%;--dc-eye-w:5.8%;--dc-eye-h:7%}
.dc-lamb{--dc-body:url('/static/mascot/draw-lamb-v2.webp');--dc-atlas:url('/static/mascot/draw-lamb-v3.webp')}
.dc-lamb .dc-eye-0{--dc-eye-x:37.2%;--dc-eye-y:59.2%;--dc-eye-w:5.6%;--dc-eye-h:6.5%}
.dc-lamb .dc-eye-1{--dc-eye-x:57.4%;--dc-eye-y:68.8%;--dc-eye-w:7.2%;--dc-eye-h:6.5%}
.dc-fox{--dc-body:url('/static/mascot/draw-fox-v2.webp');--dc-atlas:url('/static/mascot/draw-fox-v3.webp')}
.dc-fox .dc-eye-0{--dc-eye-x:73.8%;--dc-eye-y:59.6%;--dc-eye-w:6.8%;--dc-eye-h:6%}
.dc-fox .dc-eye-1{--dc-eye-x:83.4%;--dc-eye-y:44%;--dc-eye-w:3.3%;--dc-eye-h:6.2%}
.dc-rabbit{--dc-body:url('/static/mascot/draw-rabbit-v2.webp');--dc-atlas:url('/static/mascot/draw-rabbit-v3.webp')}
.dc-rabbit .dc-eye-0{--dc-eye-x:31%;--dc-eye-y:44.5%;--dc-eye-w:3.7%;--dc-eye-h:6%}
.dc-rabbit .dc-eye-1{--dc-eye-x:44.7%;--dc-eye-y:58.5%;--dc-eye-w:7.5%;--dc-eye-h:6.4%}
.dc-bear{--dc-body:url('/static/mascot/draw-bear-v2.webp');--dc-atlas:url('/static/mascot/draw-bear-v3.webp')}
.dc-bear .dc-eye-0{--dc-eye-x:78.45%;--dc-eye-y:46.75%;--dc-eye-w:3.3%;--dc-eye-h:4.4%}
.dc-cat{--dc-body:url('/static/mascot/draw-cat-v2.webp');--dc-atlas:url('/static/mascot/draw-cat-v3.webp')}
.dc-cat .dc-eye-0{--dc-eye-x:33.15%;--dc-eye-y:32.6%;--dc-eye-w:3.8%;--dc-eye-h:4.5%}
.dc-cat .dc-eye-1{--dc-eye-x:46.8%;--dc-eye-y:22.65%;--dc-eye-w:4.2%;--dc-eye-h:2.6%}
@supports not (mask-image:radial-gradient(var(--mask-solid),transparent)){.dc-face{display:none}}
@media(prefers-reduced-motion:reduce){.dc-look{transform:none!important}}