/* The reserved group is pointer-transparent; only the creatures receive clicks. */
.cc-critter-group { position: fixed; z-index: 10; width: 112px; height: 260px; pointer-events: none; animation: cc-critter-expire 12s linear forwards; }
.cc-critter-traveller { position: absolute; left: 20px; top: 8px; width: 72px; height: 72px; animation: cc-critter-travel 10s linear forwards; }
.cc-critter { position: absolute; inset: 0; pointer-events: auto; width: 72px; height: 72px; padding: 0; border: 0; background: transparent; animation: cc-critter-arrive .45s ease-out both; }
.cc-critter-sprite { display: block; width: 72px; height: 72px; background-repeat: no-repeat; }
.cc-critter--spider .cc-critter-sprite { background-image: url('/images/site/critters/custom-spider-atlas.png'); background-size: 144px 144px; transform: rotate(180deg); filter: brightness(1.65) drop-shadow(0 0 2px rgba(109,177,183,.5)); animation: cc-spider-walk 1s steps(1) infinite; }
.cc-critter--ghost .cc-critter-sprite { background-image: url('/images/site/critters/custom-ghost-atlas.png'); background-size: 144px 144px; animation: cc-ghost-fly 1.2s steps(1) infinite; }
.cc-critter--ghost.cc-critter--mirror .cc-critter-sprite { transform: scaleX(-1); }
.cc-critter--spider.cc-critter--mirror .cc-critter-sprite { transform: rotate(180deg) scaleX(-1); }
.cc-critter--ghost.cc-critter--dismissed .cc-critter-sprite { animation: cc-ghost-die .9s ease-out forwards; }
.cc-critter--spider.cc-critter--dismissed { animation: cc-critter-squash .5s ease-in forwards; }
.cc-critter--ghost.cc-critter--dismissed { animation: none; }
.cc-critter:focus-visible { outline: 2px solid #00cccc; outline-offset: 3px; border-radius: 50%; }
.cc-ghost-wisp { position: absolute; left: 50%; top: 50%; width: 16px; height: 11px; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, rgba(230,255,255,.9), rgba(99,199,209,.35) 45%, transparent 75%); filter: blur(1px); animation: cc-wisp-away .9s ease-out forwards; }
.cc-critters-toggle { margin-left: 1em; padding: 0; border: 0; background: transparent; color: #00cccc; font: inherit; text-decoration: underline; }
.cc-critters-toggle:focus-visible { outline: 2px solid #00cccc; outline-offset: 3px; }
.cc-critters-toggle:disabled { color: #a9c5c5; }
.cc-critters-toggle[hidden] { display: none; }
@keyframes cc-critter-travel { to { transform: translateY(164px); } }
@keyframes cc-spider-walk { 0% { background-position: 0 0; } 25% { background-position: -72px 0; } 50% { background-position: 0 -72px; } 75%, 100% { background-position: -72px -72px; } }
@keyframes cc-ghost-fly { 0% { background-position: 0 0; } 25% { background-position: -72px 0; } 50% { background-position: 0 -72px; } 75%, 100% { background-position: -72px -72px; } }
@keyframes cc-ghost-die { to { opacity: 0; transform: scale(1.15); filter: blur(5px); } }
@keyframes cc-wisp-away { from { opacity: .8; transform: translate(-50%,-50%) scale(.7); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.6); } }
@keyframes cc-critter-expire { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc-critter-arrive { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes cc-critter-squash { 50% { transform: scale(1.3,.25); opacity: 1; } to { transform: scale(1.3,.1); opacity: 0; } }
.cc-millipede-piece { position: absolute; width: 48px; padding: 0; border: 0; pointer-events: auto; background: transparent; animation: cc-piece-travel 4s linear forwards; }
.cc-millipede-sprite { position: absolute; inset: 0; display: block; }
.cc-millipede--down .cc-millipede-sprite { transform: rotate(180deg); }
.cc-millipede-part { position: absolute; left: 0; width: 48px; height: 48px; background-image: url('/images/site/critters/custom-millipede-atlas.png'); background-size: 144px 48px; background-repeat: no-repeat; filter: brightness(1.5) drop-shadow(0 0 1px rgba(109,177,183,.35)); animation: cc-part-wiggle .7s ease-in-out infinite alternate; }
.cc-millipede-part--head { background-position: 0 0; }
.cc-millipede-part--body { background-position: -48px 0; }
.cc-millipede-part--tail { background-position: -96px 0; }
.cc-millipede-piece:focus-visible { outline: 2px solid #00cccc; outline-offset: 2px; }
@keyframes cc-part-wiggle { from { transform: translateX(-1px) rotate(-3deg); } to { transform: translateX(1px) rotate(3deg); } }
@keyframes cc-piece-travel { to { transform: translateY(var(--travel)); } }
@media (prefers-reduced-motion: reduce) { .cc-critter-group { display: none; } }