.cubi-roamer{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;width:82px;height:94px;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 7px 8px #182b451c);transition:filter .2s}
.cubi-roamer:hover{filter:drop-shadow(0 10px 12px #0878ee42)}
.cubi-roamer:focus-visible{outline:3px solid #0878ee;outline-offset:5px;border-radius:35%}
.cubi-flip{position:absolute;inset:0;display:block;transform:scaleX(var(--cubi-face,1));transform-origin:center bottom;transition:transform .18s ease}
.cubi-walker{display:block;width:100%;height:100%;object-fit:contain;animation:cubi-step .42s ease-in-out infinite alternate}
.cubi-umbrella{position:absolute;left:50%;top:-29px;z-index:2;color:#0878ee;font-family:Arial,sans-serif;font-size:38px;line-height:1;opacity:0;transform:translate(-50%,12px) rotate(-28deg) scale(.25);transform-origin:50% 100%;transition:opacity .22s,transform .42s cubic-bezier(.2,.8,.2,1)}
.cubi-roamer.is-umbrella .cubi-umbrella{opacity:1;transform:translate(-50%,0) rotate(0) scale(1)}
.cubi-roamer.is-tipped .cubi-flip{transform:scaleX(var(--cubi-face,1)) rotate(78deg) translateY(17px)}
.cubi-roamer.is-tipped .cubi-walker{animation:none}
.cubi-bubble{position:absolute;left:50%;bottom:calc(100% + 30px);padding:6px 10px;border-radius:20px;background:#fff;color:#1d1d1f;font:600 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 3px 14px #00000014;white-space:nowrap;opacity:0;transform:translate(-50%,5px);transition:opacity .2s,transform .2s;pointer-events:none}
.cubi-roamer.is-tipped .cubi-bubble{opacity:1;transform:translate(-50%,0)}
@keyframes cubi-step{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-4px) rotate(1deg)}}
@media(max-width:700px){.cubi-roamer{width:60px;height:70px;bottom:calc(9px + env(safe-area-inset-bottom))}.cubi-umbrella{top:-25px;font-size:32px}.cubi-roamer.is-tipped .cubi-flip{transform:scaleX(var(--cubi-face,1)) rotate(78deg) translateY(12px)}}
@media(prefers-reduced-motion:reduce){.cubi-roamer,.cubi-flip,.cubi-umbrella,.cubi-bubble{transition:none}.cubi-walker{animation:none}.cubi-roamer.is-tipped .cubi-flip{transform:scaleX(var(--cubi-face,1))}}

/* Footfall frames keep Cubi grounded while crossing the screen. */
.cubi-roamer{filter:none}
.cubi-roamer::after{content:"";position:absolute;z-index:-1;left:25%;bottom:4px;width:50%;height:6px;border-radius:50%;background:#182b4538;filter:blur(2px);transition:width .18s,opacity .18s}
.cubi-walker{display:block;width:100%;height:100%;background-image:url("/fit/cubi-walk-cycle.png");background-repeat:no-repeat;background-size:200% 200%;animation:cubi-walk-cycle 1s steps(1,end) infinite;filter:drop-shadow(0 5px 7px #182b4517)}
@keyframes cubi-walk-cycle{0%{background-position:0 0}25%{background-position:100% 0}50%{background-position:0 100%}75%{background-position:100% 100%}}
@media(prefers-reduced-motion:reduce){.cubi-walker{animation:none;background-position:0 0}}