/* The marmot: parts are switched with data-eyes / data-mouth / data-brows / data-extra, motion with data-anim.
   static/js/app_marmot.js decides the mood; this file only draws it. */
.marmot { -webkit-tap-highlight-color: transparent; }
.marmot .m-v { display: none; }
.marmot .marmot-svg { overflow: visible; transform-origin: 50% 92%; }
.marmot .m-blink { transform-box: fill-box; transform-origin: center; animation: mBlink 5.2s infinite; }
.marmot .m-tuft { transform-box: fill-box; transform-origin: 50% 100%; animation: mTuft 3.8s ease-in-out infinite; }
.marmot .m-ears { transform-box: fill-box; transform-origin: 50% 100%; }
.marmot .m-look { transition: transform 260ms ease; }
.marmot[data-look="left"] .m-look { transform: translate(-5px, 1px); }
.marmot[data-look="right"] .m-look { transform: translate(5px, 0); }
.marmot[data-look="up"] .m-look { transform: translate(0, -5px); }
.marmot[data-look="down"] .m-look { transform: translate(-1px, 4px); }
.marmot[data-look="cross"] .m-look circle:nth-child(1), .marmot[data-look="cross"] .m-look circle:nth-child(2) { transform: translate(5px, 0); }
.marmot[data-look="cross"] .m-look circle:nth-child(3), .marmot[data-look="cross"] .m-look circle:nth-child(4) { transform: translate(-6px, 2px); }
.marmot[data-eyes] .m-eyes { display: none; }
.marmot[data-eyes="default"] .m-eyes-default,
.marmot[data-eyes="wide"] .m-eyes-wide,
.marmot[data-eyes="up"] .m-eyes-up,
.marmot[data-eyes="happy"] .m-eyes-happy,
.marmot[data-eyes="dizzy"] .m-eyes-dizzy,
.marmot[data-eyes="stars"] .m-eyes-stars,
.marmot[data-eyes="hearts"] .m-eyes-hearts,
.marmot[data-eyes="sad"] .m-eyes-sad,
.marmot[data-eyes="determined"] .m-eyes-determined,
.marmot[data-eyes="sleepy"] .m-eyes-sleepy,
.marmot[data-eyes="shocked"] .m-eyes-shocked,
.marmot[data-eyes="wink"] .m-eyes-wink,
.marmot[data-eyes="cool"] .m-eyes-cool { display: inline; }
.marmot[data-mouth] .m-mouth { display: none; }
.marmot[data-mouth="smile"] .m-mouth-smile,
.marmot[data-mouth="o"] .m-mouth-o,
.marmot[data-mouth="wobble"] .m-mouth-wobble,
.marmot[data-mouth="grin"] .m-mouth-grin,
.marmot[data-mouth="laugh"] .m-mouth-laugh,
.marmot[data-mouth="blep"] .m-mouth-blep,
.marmot[data-mouth="frown"] .m-mouth-frown,
.marmot[data-mouth="zigzag"] .m-mouth-zigzag,
.marmot[data-mouth="whistle"] .m-mouth-whistle,
.marmot[data-mouth="smirk"] .m-mouth-smirk,
.marmot[data-mouth="yawn"] .m-mouth-yawn { display: inline; }
.marmot[data-brows] .m-brows { display: none; }
.marmot[data-brows="default"] .m-brows-default,
.marmot[data-brows="raised"] .m-brows-raised,
.marmot[data-brows="sad"] .m-brows-sad,
.marmot[data-brows="angry"] .m-brows-angry,
.marmot[data-brows="worried"] .m-brows-worried { display: inline; }
.marmot[data-extra~="question"] .m-extra-question,
.marmot[data-extra~="exclaim"] .m-extra-exclaim,
.marmot[data-extra~="sweat"] .m-extra-sweat,
.marmot[data-extra~="tear"] .m-extra-tear,
.marmot[data-extra~="sparkle"] .m-extra-sparkle,
.marmot[data-extra~="notes"] .m-extra-notes,
.marmot[data-extra~="flame"] .m-extra-flame,
.marmot[data-extra~="confetti"] .m-extra-confetti,
.marmot[data-extra~="zzz"] .m-extra-zzz,
.marmot[data-extra~="cloud"] .m-extra-cloud,
.marmot[data-extra~="hearts"] .m-extra-hearts,
.marmot[data-extra~="vein"] .m-extra-vein,
.marmot[data-extra~="crown"] .m-extra-crown { display: inline; }
.marmot[data-ears="wiggle"] .m-ears { animation: mWiggle 520ms ease-in-out infinite; }
.marmot[data-cheeks="glow"] .m-cheek { opacity: 1; fill: #f26f6f; }
.marmot .m-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: mFlicker 420ms ease-in-out infinite alternate; }
.marmot .m-tear { animation: mTear 1.4s ease-in infinite; }
.marmot .m-rain { animation: mRain 600ms linear infinite; }
.marmot .m-cloud { animation: mBob 2.4s ease-in-out infinite; }
.marmot .m-zzz text { animation: mFloat 2.4s ease-in-out infinite; }
.marmot .m-zzz text:nth-child(2) { animation-delay: .4s; } .marmot .m-zzz text:nth-child(3) { animation-delay: .8s; }
.marmot .m-float { animation: mFloat 1.8s ease-in-out infinite; }
.marmot .m-twinkle { transform-box: fill-box; transform-origin: center; animation: mTwinkle 900ms ease-in-out infinite; }
.marmot .m-twinkle-2 { animation-delay: .45s; }
.marmot .m-confetti { animation: mConfetti 1.2s ease-out infinite; }
.marmot .m-drop { animation: mDrip 1.6s ease-in infinite; }
.marmot .m-vein { transform-box: fill-box; transform-origin: center; animation: mPulse 500ms ease-in-out infinite alternate; }
.marmot .m-crown { transform-box: fill-box; transform-origin: 50% 100%; animation: mCrown 1.6s ease-in-out infinite; }
@keyframes mAHop { 0%,100%{transform:translateY(0)}35%{transform:translateY(-16px)}60%{transform:translateY(0) scale(1.08,.92)}80%{transform:scale(.97,1.03)} }
.marmot[data-anim="hop"] .marmot-svg { animation: mAHop 650ms ease-out 1; }
@keyframes mADoublehop { 0%,50%,100%{transform:translateY(0) scale(1,1)}18%{transform:translateY(-18px)}30%{transform:translateY(0) scale(1.08,.92)}68%{transform:translateY(-22px) rotate(-6deg)}84%{transform:translateY(0) scale(1.1,.9)} }
.marmot[data-anim="doublehop"] .marmot-svg { animation: mADoublehop 1000ms ease-out 1; }
@keyframes mASpin { 0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-24px) rotate(160deg)}60%{transform:translateY(-24px) rotate(360deg)}85%{transform:translateY(0) rotate(360deg) scale(1.08,.92)}100%{transform:translateY(0) rotate(360deg)} }
.marmot[data-anim="spin"] .marmot-svg { animation: mASpin 1100ms ease-in-out 1; }
@keyframes mATada { 0%,100%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.92) rotate(-4deg)}30%,50%,70%,90%{transform:scale(1.12) rotate(5deg)}40%,60%,80%{transform:scale(1.12) rotate(-5deg)} }
.marmot[data-anim="tada"] .marmot-svg { animation: mATada 1100ms ease 1; }
@keyframes mADance { 0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-7px) rotate(-8deg) translateY(-6px)}50%{transform:translateX(0) rotate(0)}75%{transform:translateX(7px) rotate(8deg) translateY(-6px)} }
.marmot[data-anim="dance"] .marmot-svg { animation: mADance 700ms ease-in-out 4; }
@keyframes mAJelly { 0%,100%{transform:scale(1,1)}25%{transform:scale(1.14,.86)}40%{transform:scale(.88,1.12)}55%{transform:scale(1.06,.94)}70%{transform:scale(.97,1.03)} }
.marmot[data-anim="jelly"] .marmot-svg { animation: mAJelly 800ms ease 1; }
@keyframes mANod { 0%,100%{transform:rotate(0)}20%,60%{transform:rotate(6deg) translateY(3px)}40%,80%{transform:rotate(-2deg)} }
.marmot[data-anim="nod"] .marmot-svg { animation: mANod 900ms ease-in-out 1; }
@keyframes mASway { 0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)} }
.marmot[data-anim="sway"] .marmot-svg { animation: mASway 900ms ease-in-out 2; }
@keyframes mABoing { 0%{transform:scale(1,1)}30%{transform:scale(1.14,.82)}55%{transform:scale(.9,1.12) translateY(-8px)}80%{transform:scale(1.03,.97)}100%{transform:scale(1,1)} }
.marmot[data-anim="boing"] .marmot-svg { animation: mABoing 500ms ease-out 1; }
@keyframes mAWobble { 0%,100%{transform:rotate(0)}15%{transform:rotate(-10deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}75%{transform:rotate(-2deg)} }
.marmot[data-anim="wobble"] .marmot-svg { animation: mAWobble 900ms ease-in-out 1; }
@keyframes mAShake { 0%,100%{transform:translateX(0)}15%,45%,75%{transform:translateX(-6px) rotate(-3deg)}30%,60%,90%{transform:translateX(6px) rotate(3deg)} }
.marmot[data-anim="shake"] .marmot-svg { animation: mAShake 650ms ease-in-out 1; }
@keyframes mAShiver { 0%,100%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)} }
.marmot[data-anim="shiver"] .marmot-svg { animation: mAShiver 120ms linear 8; }
@keyframes mASink { 0%{transform:translateY(0)}40%,75%{transform:translateY(22px) scale(1.04,.96)}100%{transform:translateY(0)} }
.marmot[data-anim="sink"] .marmot-svg { animation: mASink 1800ms ease-in-out 1; }
@keyframes mAPeekdown { 0%{transform:translateY(0)}25%,70%{transform:translateY(70px)}85%{transform:translateY(-6px)}100%{transform:translateY(0)} }
.marmot[data-anim="peekdown"] .marmot-svg { animation: mAPeekdown 2200ms ease-in-out 1; }
@keyframes mAFaceplant { 0%{transform:rotate(0)}30%{transform:rotate(22deg) translate(8px,10px)}45%{transform:rotate(18deg) translate(8px,14px)}70%{transform:rotate(18deg) translate(8px,14px)}100%{transform:rotate(0)} }
.marmot[data-anim="faceplant"] .marmot-svg { animation: mAFaceplant 1600ms ease-in-out 1; }
@keyframes mAJump { 0%,100%{transform:translateY(0) scale(1)}20%{transform:translateY(-30px) scale(1.06)}45%{transform:translateY(0) scale(1.1,.9)}60%{transform:translateY(-6px)} }
.marmot[data-anim="jump"] .marmot-svg { animation: mAJump 700ms ease-out 1; }
@keyframes mAStretch { 0%,100%{transform:scale(1,1)}40%{transform:scale(.92,1.14) translateY(-6px)}60%{transform:scale(.94,1.1) translateY(-4px)} }
.marmot[data-anim="stretch"] .marmot-svg { animation: mAStretch 1300ms ease-in-out 1; }
@keyframes mALook { 0%,100%{transform:rotate(0)}30%,45%{transform:rotate(-8deg)}65%,80%{transform:rotate(8deg)} }
.marmot[data-anim="look"] .marmot-svg { animation: mALook 1600ms ease-in-out 1; }
.marmot:active .marmot-svg { animation: mABoing 500ms ease-out; }
@keyframes mBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes mTuft { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes mWiggle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes mFlicker { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.92, 1.12) rotate(3deg); } }
@keyframes mTear { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(16px); opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
@keyframes mDrip { 0%, 30% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes mRain { from { transform: translateY(-3px); opacity: 1; } to { transform: translateY(7px); opacity: .2; } }
@keyframes mBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mFloat { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes mTwinkle { 0%, 100% { transform: scale(.7) rotate(0); } 50% { transform: scale(1.15) rotate(20deg); } }
@keyframes mConfetti { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-8px) scale(1.05); opacity: 0; } }
@keyframes mPulse { from { transform: scale(.85); } to { transform: scale(1.15); } }
@keyframes mCrown { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.challenge-paws { transform-origin: 50% 100%; }
.challenge-wrap[data-paws="drum"] .challenge-paws { animation: mDrum 220ms ease-in-out 10 alternate; }
.challenge-wrap[data-paws="grip"] .challenge-paws { animation: mGrip 90ms linear 10; }
@keyframes mDrum { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes mGrip { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) {
    .marmot *, .marmot .marmot-svg, .challenge-paws { animation: none !important; transition: none !important; }
}