.olive-mascot{
  --mascot-x:calc(100vw - clamp(170px,13vw,225px) - 24px);
  --mascot-y:0px;
  --mascot-facing:1;
  position:fixed;
  left:0;
  bottom:clamp(8px,1.5vw,20px);
  z-index:4900;
  width:clamp(170px,13vw,225px);
  aspect-ratio:1;
  pointer-events:none;
  opacity:0;
  transform:translate3d(var(--mascot-x),calc(var(--mascot-y) + 28px),0);
  transition:opacity .55s ease,filter .35s ease;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.38));
  will-change:transform,opacity;
  contain:layout;
  overflow:visible;
}
.olive-mascot.is-visible{opacity:.97;transform:translate3d(var(--mascot-x),var(--mascot-y),0);pointer-events:auto;cursor:pointer}
.olive-mascot:focus-visible{outline:2px solid #d8c58a;outline-offset:5px;border-radius:50%}
.olive-mascot-sprite{
  --mascot-clip-right:0%;
  width:100%;
  height:100%;
  background:url("./assets/olive-mascot-sprite.webp?v=20260831-1") no-repeat 0 0;
  background-size:1400% 100%;
  transform:scaleX(var(--mascot-facing));
  transform-origin:50% 85%;
  clip-path:inset(0 var(--mascot-clip-right) 0 0);
  will-change:background-position,transform;
}
.olive-mascot.is-walking .olive-mascot-sprite{animation:olive-walk-sway .86s linear infinite}
.olive-mascot.is-climbing .olive-mascot-sprite{animation:olive-climb .55s ease-in-out infinite alternate}
.olive-mascot.is-visible:not(.is-walking):not(.is-waving):not(.is-bowing):not(.is-hopping):not(.is-peeking):not(.is-inspecting):not(.is-tripping):not(.is-straightening):not(.is-sleeping) .olive-mascot-sprite{animation:olive-idle .7s ease-in-out infinite alternate}
.olive-mascot.is-waving .olive-mascot-sprite{animation:olive-greeting .55s ease-in-out infinite alternate}
.olive-mascot.is-bowing .olive-mascot-sprite{animation:olive-bow-finish .8s ease-in-out infinite alternate}
.olive-mascot.is-hopping{filter:drop-shadow(0 24px 20px rgba(0,0,0,.28))}
.olive-mascot.is-inspecting .olive-mascot-sprite{animation:olive-inspect 1.5s ease-in-out infinite alternate}
.olive-mascot.is-tripping .olive-mascot-sprite{animation:olive-trip 1s cubic-bezier(.36,.07,.19,.97)}
.olive-mascot.is-straightening .olive-mascot-sprite{animation:olive-straighten .7s ease-in-out}
.olive-mascot.is-sleeping .olive-mascot-sprite{animation:olive-sleep 1.7s ease-in-out infinite alternate}
.olive-mascot.is-celebrating{filter:drop-shadow(0 18px 28px rgba(205,183,103,.5))}
.olive-mascot-prop{position:absolute;z-index:3;right:4%;top:28%;font-size:clamp(26px,3vw,46px);opacity:0;transform:translateY(8px) rotate(8deg);transition:opacity .2s ease,transform .3s ease;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));pointer-events:none}
.olive-mascot.has-prop .olive-mascot-prop{opacity:1;transform:translateY(0) rotate(-5deg)}
.olive-mascot-bubble{position:absolute;z-index:5;right:0;bottom:82%;box-sizing:border-box;width:210px;height:auto;min-height:0;padding:12px 15px;border:2px solid #bda765;border-radius:14px 14px 4px 14px;background:#f7f1df;color:#182015;font:700 14px/1.4 Arial,sans-serif;letter-spacing:0;text-align:center;text-shadow:none;white-space:normal;overflow:visible;overflow-wrap:break-word;word-break:normal;box-shadow:0 9px 26px rgba(0,0,0,.45);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .2s ease,transform .25s ease;pointer-events:none}
.olive-mascot.bubble-left .olive-mascot-bubble{left:0;right:auto;border-radius:14px 14px 14px 4px}
.olive-mascot-bubble::after{content:"";position:absolute;right:12px;bottom:-9px;width:14px;height:14px;border-right:2px solid #bda765;border-bottom:2px solid #bda765;background:#f7f1df;transform:rotate(45deg)}
.olive-mascot.has-message .olive-mascot-bubble{opacity:1;transform:translateY(0) scale(1)}
@keyframes olive-walk-sway{0%,100%{transform:scaleX(var(--mascot-facing)) translateY(0) rotate(-1deg)}25%{transform:scaleX(var(--mascot-facing)) translateY(-3px) rotate(0)}50%{transform:scaleX(var(--mascot-facing)) translateY(0) rotate(1deg)}75%{transform:scaleX(var(--mascot-facing)) translateY(-2px) rotate(0)}}
@keyframes olive-climb{from{transform:scaleX(var(--mascot-facing)) rotate(-4deg)}to{transform:scaleX(var(--mascot-facing)) rotate(4deg)}}
@keyframes olive-idle{from{transform:scaleX(var(--mascot-facing)) translateY(0) rotate(-.5deg)}to{transform:scaleX(var(--mascot-facing)) translateY(-3px) rotate(.5deg)}}
@keyframes olive-greeting{from{transform:scaleX(var(--mascot-facing)) rotate(-2deg)}to{transform:scaleX(var(--mascot-facing)) rotate(2deg)}}
@keyframes olive-bow-finish{from{transform:scaleX(var(--mascot-facing)) rotate(0)}to{transform:scaleX(var(--mascot-facing)) rotate(2deg)}}
@keyframes olive-inspect{from{transform:scaleX(var(--mascot-facing)) translateY(0)}to{transform:scaleX(var(--mascot-facing)) translateY(3px)}}
@keyframes olive-trip{0%,100%{transform:scaleX(var(--mascot-facing)) rotate(0)}35%{transform:scaleX(var(--mascot-facing)) rotate(-11deg) translateY(8px)}60%{transform:scaleX(var(--mascot-facing)) rotate(5deg) translateY(-3px)}}
@keyframes olive-straighten{0%,100%{transform:scaleX(var(--mascot-facing)) scale(1)}45%{transform:scaleX(var(--mascot-facing)) scale(.96,1.04)}}
@keyframes olive-sleep{from{transform:scaleX(var(--mascot-facing)) rotate(2deg) translateY(4px)}to{transform:scaleX(var(--mascot-facing)) rotate(4deg) translateY(7px)}}
@media(max-width:720px){.olive-mascot{width:132px;bottom:8px;--mascot-x:calc(100vw - 142px)}}
@media(max-width:430px){.olive-mascot{width:112px;--mascot-x:calc(100vw - 120px)}.olive-mascot-bubble{bottom:86%;width:min(190px,calc(100vw - 20px));padding:11px 13px;font-size:14px;line-height:1.4}}
@media(prefers-reduced-motion:reduce){.olive-mascot{display:none}}