.dritten { position: absolute; }
.dritten .dr-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.dr-root { transform-origin: 200px 410px; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }
.dr-head { transform-origin: 200px 270px; animation: headTilt 7s ease-in-out infinite; }
@keyframes headTilt { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-5deg); } 88% { transform: rotate(3deg); } }
.dr-wingL { transform-origin: 150px 275px; animation: wingIdle 2.6s ease-in-out infinite; }
.dr-wingR { transform-origin: 150px 275px; animation: wingIdle 2.6s ease-in-out infinite; }
@keyframes wingIdle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
.dr-tail { transform-origin: 276px 352px; animation: tailSway 3s ease-in-out infinite; }
@keyframes tailSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
.dr-eyeL { transform-origin: 152px 206px; }
.dr-eyeR { transform-origin: 248px 206px; }
.dr-eye { animation: blink 4.6s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
.dr-earL { transform-origin: 148px 150px; animation: earTwitch 6s infinite; }
.dr-earR { transform-origin: 252px 150px; }
@keyframes earTwitch { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-10deg); } 94% { transform: rotate(0); } }
.dr-pawL { transform-origin: 170px 410px; }
.dr-pawR { transform-origin: 230px 410px; }
.dr-pupil { transition: transform .1s; }

.dr-eyes-closed, .dr-eyes-happy, .dr-mouth-open, .dr-mouth-o, .x-mustache, .x-flowers, .x-polka, .x-ice, .x-soot { display: none; }

.st-happy .dr-eyes, .st-happy .dr-mouth { display: none; }
.st-happy .dr-eyes-happy, .st-happy .dr-mouth-open { display: inline; }
.st-happy .dr-root { animation: hop .5s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-26px) scale(.97, 1.04); } 80% { transform: translateY(0) scale(1.05, .95); } }
.st-happy .dr-wing { animation-duration: .35s; }

.st-purr .dr-eyes, .st-purr .dr-mouth { display: none; }
.st-purr .dr-eyes-happy, .st-purr .dr-mouth { display: inline; }
.st-purr .dr-root { animation: purr .12s linear infinite; }
@keyframes purr { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
.st-purr .dr-head { animation: none; transform: rotate(-8deg); transition: transform .3s; }

.st-sleep .dr-eyes { display: none; }
.st-sleep .dr-eyes-closed { display: inline; }
.st-sleep .dr-root { animation: sleepy 4s ease-in-out infinite; }
@keyframes sleepy { 0%, 100% { transform: scale(1, 1) translateY(4px); } 50% { transform: scale(1.03, .96) translateY(8px); } }
.st-sleep .dr-head { animation: none; transform: rotate(10deg) translateY(10px); }
.st-sleep .dr-wing { animation: none; transform: rotate(18deg); }
.st-sleep .dr-tail { animation-duration: 6s; }

.st-eat .dr-eyes { display: none; }
.st-eat .dr-eyes-happy { display: inline; }
.st-eat .dr-mouth-open { display: inline; animation: chomp .26s steps(2) infinite; }
@keyframes chomp { 0% { opacity: 1; } 100% { opacity: 0; } }

.st-surprised .dr-mouth { display: none; }
.st-surprised .dr-mouth-o { display: inline; }
.st-surprised .dr-eye { animation: none; transform: scale(1.15); }
.st-surprised .dr-root { animation: shake .3s ease-in-out 2; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

.st-pounce .dr-root { animation: pounce .6s ease-out; }
@keyframes pounce { 0% { transform: scale(1, 1); } 25% { transform: scale(1.1, .85); } 55% { transform: translateY(-80px) scale(.95, 1.08) rotate(-6deg); } 100% { transform: translateY(0) scale(1, 1); } }
.st-pounce .dr-mouth { display: none; }
.st-pounce .dr-mouth-open { display: inline; }
.st-pounce .dr-wing { animation-duration: .2s; }

.st-drink .dr-mouth { display: none; }
.st-drink .dr-mouth-o { display: inline; }
.st-drink .dr-head { animation: none; transform: rotate(-12deg); transition: transform .3s; }

/* ---------- potion effects ---------- */
.dritten.fx-bigpaws .dr-paw { transform: scale(2.6); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.dritten .dr-paw, .dritten .dr-head, .dritten .dr-ear, .dritten .dr-tail { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.dritten.fx-tiny .dr-svg { transform: scale(.12); transform-origin: 50% 93%; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.dritten.fx-giant .dr-svg { transform: scale(1.55); transform-origin: 50% 93%; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.dritten .dr-svg { transition: transform .7s ease, filter .6s, opacity .6s; }
.dritten.fx-rainbow .dr-svg { animation: rainbow 1.2s linear infinite; }
@keyframes rainbow { from { filter: hue-rotate(0deg) saturate(1.6); } to { filter: hue-rotate(360deg) saturate(1.6); } }
.dritten.fx-float .dr-svg { animation: floaty 2.4s ease-in-out infinite; }
@keyframes floaty { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-190px) rotate(-6deg); } 100% { transform: translateY(-150px) rotate(5deg); } }
.dritten.fx-float .dr-wing { animation-duration: .25s; }
.dritten.fx-invisible .dr-svg { animation: flicker 3.6s ease-in-out forwards; }
@keyframes flicker { 0% { opacity: 1; } 15% { opacity: .1; } 20% { opacity: .8; } 28% { opacity: 0; } 70% { opacity: 0; } 75% { opacity: .7; } 80% { opacity: .1; } 100% { opacity: 1; } }
.dritten.fx-upside .dr-svg { transform: rotate(180deg) translateY(-50px); transform-origin: 50% 50%; transition: transform .8s cubic-bezier(.4, 1.5, .5, 1); }
.dritten.fx-bighead .dr-head { animation: none; transform: scale(1.6) translateY(-34px); }
.dritten.fx-jelly .dr-svg { animation: jelly .6s ease-in-out infinite; transform-origin: 50% 93%; }
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.25, .78); } 50% { transform: scale(.82, 1.2); } 75% { transform: scale(1.1, .9); } }
.dritten.fx-spin .dr-svg { animation: spin .7s linear infinite; transform-origin: 50% 55%; }
@keyframes spin { to { transform: rotate(360deg); } }
.dritten.fx-frozen .x-ice { display: inline; }
.dritten.fx-frozen .dr-svg { filter: hue-rotate(160deg) saturate(.5) brightness(1.15); }
.dritten.fx-frozen .dr-root, .dritten.fx-frozen .dr-root * { animation-play-state: paused !important; }
.dritten.fx-frozen .dr-mouth { display: none; }
.dritten.fx-frozen .dr-mouth-o { display: inline; }
.dritten.fx-fire .dr-mouth { display: none; }
.dritten.fx-fire .dr-mouth-open { display: inline; }
.dritten.fx-fire .dr-root { animation: sneezeBack 1.2s ease-out; }
@keyframes sneezeBack { 0% { transform: rotate(0); } 40% { transform: rotate(-8deg) translateY(-4px); } 55% { transform: rotate(10deg) translateX(20px); } 100% { transform: rotate(0); } }
.dritten.fx-hiccup .dr-root { animation: hiccup 1s ease-out infinite; }
@keyframes hiccup { 0%, 100% { transform: translateY(0); } 12% { transform: translateY(-40px) scale(.96, 1.06); } 26% { transform: translateY(0); } }
.dritten.fx-hiccup .dr-mouth { display: none; }
.dritten.fx-hiccup .dr-mouth-o { display: inline; }
.dritten.fx-flowers .x-flowers { display: inline; }
.dritten.fx-flowers .x-flower { animation: bloom .6s cubic-bezier(.3, 1.8, .5, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes bloom { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }
.dritten.fx-mustache .x-mustache { display: inline; }
.dritten.fx-mustache .dr-mouth { display: none; }
.dritten.fx-mustache .dr-head { animation: none; transform: rotate(-6deg); }
.dritten.fx-polka .x-polka { display: inline; }
.dritten.fx-longtail .dr-tail { animation: none; transform: scale(1.9) rotate(-18deg); }
.dritten.fx-ears .dr-ear { animation: none; transform: scaleY(2.2); }
.dritten.fx-ears .dr-earL { transform-origin: 148px 150px; }
.dritten.fx-ears .dr-earR { transform-origin: 252px 150px; }
.dritten.fx-glow .dr-svg { filter: drop-shadow(0 0 22px #fff6a0) drop-shadow(0 0 40px #ffd34d) brightness(1.25); }
.dritten.fx-tall .dr-svg { transform: scale(.78, 1.55); transform-origin: 50% 93%; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.dritten.fx-smoke .x-soot { display: inline; }
.dritten.fx-smoke .dr-svg { filter: brightness(.7) saturate(.6); }
.dritten.fx-smoke .dr-eyes { animation: none; }
.dritten.fx-snow .dr-mouth { display: none; }
.dritten.fx-snow .dr-mouth-o { display: inline; }

.dr-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.dr-particle { position: absolute; transform: translate(-50%, -50%); pointer-events: none; animation-fill-mode: forwards; animation-timing-function: ease-out; }
.p-rise { animation-name: pRise; }
@keyframes pRise { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -20px) scale(1.1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -170px) scale(.9); } }
.p-fall { animation-name: pFall; animation-timing-function: linear; }
@keyframes pFall { 0% { opacity: 0; transform: translate(-50%, 0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), 260px) rotate(200deg); } }
.p-burst { animation-name: pBurst; }
@keyframes pBurst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 4), calc(-50% - 120px)) scale(1.2); } }
.p-fire { animation-name: pFire; }
@keyframes pFire { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + 340px), calc(-50% + var(--dx))) scale(2.2); } }

.bubble {
  position: absolute; left: 50%; top: -6%; transform: translate(-50%, -100%); background: #fff; color: var(--ol); border: 4px solid var(--ol);
  border-radius: 26px; padding: 10px 22px; font-size: 30px; font-weight: 600; white-space: nowrap; animation: bubbleIn .35s cubic-bezier(.3, 1.6, .5, 1); z-index: 5;
  box-shadow: 0 6px 0 rgba(0,0,0,.2);
}
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -18px; border: 14px solid transparent; border-top-color: var(--ol); transform: translateX(-50%); }
.bubble.out { opacity: 0; transition: opacity .35s; }
@keyframes bubbleIn { from { transform: translate(-50%, -100%) scale(.4); opacity: 0; } to { transform: translate(-50%, -100%) scale(1); opacity: 1; } }