/* mono.css — mascota pixel de Claude (Roger.IA) */
.mono { position:relative; display:inline-block; width:56px; line-height:0; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.mono svg { width:100%; height:auto; overflow:visible; display:block; }
.mono svg * { transform-box:fill-box; }

.mono .m-eye   { transform-origin:center; animation:mono-blink 4.2s infinite; }
.mono .m-body  { animation:mono-bob 2.4s ease-in-out infinite; }

/* caminando: patas alternas y cuerpo con rebote */
.mono-walk .m-body  { animation:mono-bob .5s steps(1) infinite; }
.mono-walk .m-legs-a { animation:mono-step .5s steps(1) infinite; }
.mono-walk .m-legs-b { animation:mono-step .5s steps(1) infinite -.25s; }

/* saludando */
.mono-wave .m-arm-r { animation:mono-wave .7s steps(1) infinite; }

/* salto al hacer clic */
.mono.jump { animation:mono-jump .45s ease-out; }

@keyframes mono-blink { 0%,94%,100% { transform:scaleY(1); } 96%,98% { transform:scaleY(.08); } }
@keyframes mono-bob   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes mono-step  { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-28px); } }
@keyframes mono-wave  { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-70px); } }
@keyframes mono-jump  { 0% { transform:translateY(0); } 40% { transform:translateY(-22px); } 100% { transform:translateY(0); } }

/* globo de texto */
.mono-bubble {
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap; line-height:1.3;
  font:500 12px/1.3 'Space Grotesk', system-ui, sans-serif;
  color:#171717; background:#fff; border:1px solid #E5E5E5;
  padding:6px 10px; border-radius:10px;
  box-shadow:0 6px 18px rgba(23,23,23,.10);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.mono-bubble::after {
  content:''; position:absolute; top:100%; left:50%; margin-left:-5px;
  border:5px solid transparent; border-top-color:#fff;
}
.mono.say .mono-bubble { opacity:1; transform:translateX(-50%) translateY(0); }

/* carril por donde camina */
.mono-lane { position:relative; height:46px; overflow:visible; pointer-events:none; }
.mono-lane .mono { position:absolute; bottom:-1px; left:0; pointer-events:auto; animation:mono-patrol 26s linear infinite; }
.mono-lane .mono .mono-flip { transform-origin:center; animation:mono-turn 26s steps(1) infinite; }
@keyframes mono-patrol { 0% { left:2%; } 50% { left:calc(98% - 56px); } 100% { left:2%; } }
@keyframes mono-turn   { 0%,49.99% { transform:scaleX(1); } 50%,100% { transform:scaleX(-1); } }

.mono-spot { position:absolute; z-index:5; }

@media (prefers-reduced-motion:reduce) {
  .mono *, .mono { animation:none !important; }
  .mono-lane .mono { left:50%; }
}