#officemad-mascot {
    position: fixed;
    left: 0;
    top: 0;
    width: clamp(130px, 14vw, 200px);
    height: auto;
    z-index: 9998;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity, filter;
}

#officemad-mascot img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,.18));
}

#officemad-mascot.om-running img {
    animation: om-demon-run .18s ease-in-out infinite alternate;
}

@keyframes om-demon-run {
    from {
        transform: translateY(0) rotate(-3deg);
    }

    to {
        transform: translateY(-9px) rotate(3deg);
    }
}

/* Happy Shopping bubble */
#officemad-mascot .om-happy-shopping {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 8px);
    transform: translateX(-50%) scale(.65);
    min-width: 165px;
    padding: 11px 15px;
    border: 3px solid #111;
    border-radius: 22px;
    background: #fff;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    box-shadow: 0 7px 16px rgba(0,0,0,.18);
    transform-origin: 50% 100%;
}

#officemad-mascot .om-happy-shopping::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-right: 3px solid #111;
    border-bottom: 3px solid #111;
    transform: translateX(-50%) rotate(45deg);
}

#officemad-mascot.om-caught img {
    animation: om-demon-caught .32s ease-out both;
}

#officemad-mascot.om-caught .om-happy-shopping {
    animation: om-happy-pop .32s cubic-bezier(.2,1.5,.4,1) forwards;
}

@keyframes om-demon-caught {
    0% {
        transform: translateY(-5px) rotate(-3deg) scale(1);
    }

    60% {
        transform: translateY(-13px) rotate(4deg) scale(1.07);
    }

    100% {
        transform: translateY(0) rotate(0) scale(1);
    }
}

@keyframes om-happy-pop {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(.65);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

/* POOF */
#officemad-mascot .om-poof {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 55%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.2);
    opacity: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    box-shadow:
        -42px -8px 0 -10px rgba(255,255,255,.92),
        38px -17px 0 -13px rgba(255,255,255,.92),
        -28px 31px 0 -14px rgba(255,255,255,.90),
        34px 30px 0 -15px rgba(255,255,255,.90),
        0 -39px 0 -17px rgba(255,255,255,.88),
        0 39px 0 -17px rgba(255,255,255,.88);
}

#officemad-mascot .om-poof::after {
    content: "POOF!";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4b16;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 900;
    font-style: italic;
    transform: rotate(-8deg);
}

#officemad-mascot.om-poofing .om-happy-shopping {
    animation: om-bubble-away .18s ease-in forwards;
}

#officemad-mascot.om-poofing img {
    animation: om-demon-poof .42s ease-in forwards;
}

#officemad-mascot.om-poofing .om-poof {
    animation: om-poof-cloud .62s ease-out forwards;
}

@keyframes om-bubble-away {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(.82);
    }
}

@keyframes om-demon-poof {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0);
    }

    65% {
        opacity: .45;
        transform: scale(.72) rotate(10deg);
        filter: blur(1px);
    }

    100% {
        opacity: 0;
        transform: scale(.05) rotate(22deg);
        filter: blur(4px);
    }
}

@keyframes om-poof-cloud {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.2);
    }

    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }

    70% {
        opacity: .92;
        transform: translate(-50%, -50%) scale(1.32);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.65);
    }
}

/* Real touch/coarse devices: decorative static mascot only */
@media (pointer: coarse) {
    #officemad-mascot {
        left: auto !important;
        top: auto !important;
        right: 10px !important;
        bottom: 10px !important;
        width: 92px;
        transform: none !important;
    }

    #officemad-mascot img {
        animation: none !important;
    }
}

/* ==========================================================
   V4.5B — SIMPLE MAGIC PFFT
   Keep the proven V4.4 structure.
   Hide its old cloud body/text and use tiny visual puffs only.
   ========================================================== */

#officemad-mascot .om-poof {
    background: transparent !important;
    box-shadow: none !important;
}

#officemad-mascot .om-poof::after {
    content: "" !important;
    display: none !important;
}

/* Six tiny puffs are painted with box-shadow.
   They exist only during the disappearance animation. */
#officemad-mascot.om-poofing .om-poof {
    width: 22px !important;
    height: 22px !important;
    opacity: 0;
    background: rgba(255,255,255,.92) !important;
    box-shadow:
        -42px -18px 0 5px rgba(255,255,255,.82),
         40px -24px 0 8px rgba(255,255,255,.78),
        -52px  24px 0 3px rgba(255,255,255,.72),
         49px  27px 0 6px rgba(255,255,255,.70),
         -5px -48px 0 4px rgba(255,255,255,.76),
          7px  47px 0 2px rgba(255,255,255,.66) !important;

    animation: om-simple-pfft .48s ease-out forwards !important;
}

@keyframes om-simple-pfft {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.25);
    }

    22% {
        opacity: .95;
        transform: translate(-50%, -50%) scale(.75);
    }

    58% {
        opacity: .70;
        transform: translate(-50%, -50%) scale(1.25);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.75);
    }
}

/* Faster, cleaner disappearance of the demon itself. */
#officemad-mascot.om-poofing img {
    animation: om-simple-demon-away .34s ease-in forwards !important;
}

@keyframes om-simple-demon-away {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    55% {
        opacity: .70;
        transform: scale(.72);
        filter: blur(1px);
    }

    100% {
        opacity: 0;
        transform: scale(.12);
        filter: blur(4px);
    }
}