/* Kibble Cantation: an outdoor sibling, sharing the Cantation interaction language. */
body[data-world="kibble"]{background:#252c38;color:#f2e5cd}:where([data-world="kibble"]) .house{border-color:#778175;border-radius:95px 95px 26px 26px;background:#4e615b;isolation:isolate}:where([data-world="kibble"]) .house:after{display:none}
:where([data-world="kibble"]) .garden-scenery{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
:where([data-world="kibble"]) #board{height:clamp(420px,57svh,500px);margin:133px 12px 14px}:where([data-world="kibble"]) .character .art{filter:drop-shadow(0 5px 3px #1c2e3550)}
:where([data-world="kibble"]) .figure{transform:translateY(0) scaleY(1)}:where([data-world="kibble"]) .character.active .figure{transform:translateY(-7px) scaleY(1.08)}
:where([data-world="kibble"]) .spell-ring{top:25%;height:62%;border-color:#e4d1a13b;box-shadow:inset 0 0 30px #e3d4a30d}
:where([data-world="kibble"]) #cauldron{left:29%;top:43%;width:42%;height:25%;z-index:2}:where([data-world="kibble"]) .pot-energy{transform-origin:100px 110px}
:where([data-world="kibble"]) #bonus-candies{top:20px;left:calc(50% - 54px);width:108px;gap:4px}:where([data-world="kibble"]) .bonus-sweet{width:33px;height:25px;filter:drop-shadow(0 0 5px #f0dab780)}
:where([data-world="kibble"]) #moon-garden{position:absolute;right:10px;top:30px;width:104px;height:104px;z-index:1;pointer-events:none}
:where([data-world="kibble"]) #moon{left:21px;top:21px;width:62px;height:62px;filter:drop-shadow(0 0 10px #f8dbad50)}:where([data-world="kibble"]) #moon-face{opacity:1}
:where([data-world="kibble"]) #moon-hearts{position:absolute;inset:0;width:100%;height:100%;overflow:visible}:where([data-world="kibble"]) .saved-kiss{animation:kiss-float 3s ease-in-out infinite;filter:drop-shadow(0 0 2px #f5c3ad)}@keyframes kiss-float{50%{translate:0 -2px}}
:where([data-world="kibble"]) .pet-head{transform-origin:68px 99px}:where([data-world="kibble"]) .pet-body{transform-origin:68px 166px}
:where([data-world="kibble"]) .character[data-species="dog"].moon-reaction .pet-head{animation:moon-howl 1.5s ease-in-out}:where([data-world="kibble"]) .character[data-species="cat"].moon-reaction .pet-body{animation:feline-stretch 1.5s ease-in-out}:where([data-world="kibble"]) .character[data-species="cat"].moon-reaction .pet-head{animation:feline-gaze 1.5s ease-in-out}:where([data-world="kibble"]) .character[data-species="raccoon"].moon-reaction .figure{animation:raccoon-flip 1.5s ease-in-out}
@keyframes moon-howl{25%,65%{transform:translateY(-7px) rotate(-13deg)}45%{transform:translateY(-9px) rotate(-15deg)}}
@keyframes feline-stretch{30%,70%{transform:scale(1.05,1.2) translateY(-1px)}}@keyframes feline-gaze{30%,70%{transform:translateY(-5px) rotate(6deg)}}
@keyframes raccoon-flip{20%{transform:translateY(4px) scaleY(.9)}60%{transform:translateY(-24px) rotate(-360deg)}100%{transform:rotate(-360deg)}}
:where([data-world="kibble"]) .moon-reaction .halo{opacity:.2}:where([data-world="kibble"]) .character.energized .figure{animation:pet-happy .55s ease-in-out 2}@keyframes pet-happy{50%{transform:translateY(-9px) rotate(3deg)}}
:where([data-world="kibble"]) #moth,:where([data-world="kibble"]) #mouse,:where([data-world="kibble"]) #snail{position:absolute;pointer-events:none;opacity:0;z-index:8}
:where([data-world="kibble"]) #moth{width:42px;height:30px;top:62px;left:-50px}:where([data-world="kibble"]) #moth.visiting{animation:moth-drift 5.2s ease-in-out both}:where([data-world="kibble"]) .moth-wings{transform-origin:50px 30px}:where([data-world="kibble"]) #moth.visiting .moth-wings{animation:flap .17s ease-in-out infinite alternate}
@keyframes moth-drift{0%{left:-50px;top:74px;opacity:1}35%{top:45px}65%{top:93px}100%{left:110%;top:50px;opacity:1}}
:where([data-world="kibble"]) #mouse{width:66px;height:39px;bottom:8px;left:-80px}:where([data-world="kibble"]) #mouse.visiting{animation:mouse-dash 2.6s linear both}:where([data-world="kibble"]) .mouse-key{transform-origin:46px 13px}:where([data-world="kibble"]) #mouse.visiting .mouse-key{animation:key-turn .25s linear infinite}@keyframes key-turn{50%{transform:scaleX(.2)}}@keyframes mouse-dash{0%{left:-80px;opacity:1}100%{left:110%;opacity:1}}
:where([data-world="kibble"]) #snail{width:52px;height:38px;bottom:5px;left:-58px}:where([data-world="kibble"]) #snail.visiting{animation:snail-meander 24s linear both}@keyframes snail-meander{0%{left:-58px;opacity:1}100%{left:105%;opacity:1}}
:where([data-world="kibble"]) .house.quiet .garden-scenery{filter:brightness(.72);transition:filter 2s}:where([data-world="kibble"]) .house.quiet{box-shadow:0 12px 40px #101d2580,inset 0 0 70px #192f35}
@media(max-height:730px){:where([data-world="kibble"]) #board{height:370px;margin-top:126px}body[data-world="kibble"] main{padding-top:8px}:where([data-world="kibble"]) header{margin-bottom:12px}}
@media(max-width:360px){:where([data-world="kibble"]) main{padding-left:8px;padding-right:8px}:where([data-world="kibble"]) #moon-garden{right:4px;width:94px;height:94px}:where([data-world="kibble"]) #moon{left:19px;top:19px;width:56px;height:56px}}
@media all{:root[data-motion="reduce"] :where([data-world="kibble"]) .saved-kiss,:root[data-motion="reduce"] :where([data-world="kibble"]) .character.moon-reaction .pet-head,:root[data-motion="reduce"] :where([data-world="kibble"]) .character.moon-reaction .pet-body,:root[data-motion="reduce"] :where([data-world="kibble"]) .character.moon-reaction .figure,:root[data-motion="reduce"] :where([data-world="kibble"]) .character.energized .figure,:root[data-motion="reduce"] :where([data-world="kibble"]) #moth.visiting .moth-wings,:root[data-motion="reduce"] :where([data-world="kibble"]) #mouse.visiting .mouse-key{animation:none}:root[data-motion="reduce"] :where([data-world="kibble"]) #moth.visiting,:root[data-motion="reduce"] :where([data-world="kibble"]) #mouse.visiting,:root[data-motion="reduce"] :where([data-world="kibble"]) #snail.visiting{animation:none;left:8px;opacity:1}:root[data-motion="reduce"] :where([data-world="kibble"]) .moon-reaction .art{filter:drop-shadow(0 0 8px #f0d591)}:root[data-motion="reduce"] :where([data-world="kibble"]) .house.quiet .garden-scenery{transition:none}}
@media all{:root[data-motion="reduce"] :where([data-world="kibble"]) .character[data-species].moon-reaction .pet-head,:root[data-motion="reduce"] :where([data-world="kibble"]) .character[data-species].moon-reaction .pet-body,:root[data-motion="reduce"] :where([data-world="kibble"]) .character[data-species].moon-reaction .figure{animation:none}:root[data-motion="reduce"] :where([data-world="kibble"]) #moon.blowing #moon-face{transform:none}}