/* ═══════════════════════════════════════════════════════════
   EduCan · El intruso — weimaraner que se porta mal
   ═══════════════════════════════════════════════════════════ */

#perro{
  position:fixed; left:0; bottom:0; z-index:850;
  width:104px; height:68px;
  pointer-events:auto; cursor:pointer;
  image-rendering:pixelated;
  transform:translate3d(-200px,0,0);
  will-change:transform;
  user-select:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
#perro img{width:100%;height:100%;display:block;image-rendering:pixelated}
#perro.mira-izq img{transform:scaleX(-1)}

/* pequeño rebote al caminar */
#perro.anda{animation:perroTrote .34s steps(1) infinite}
@keyframes perroTrote{0%,100%{margin-bottom:0}50%{margin-bottom:3px}}

/* travesuras */
#perro.salta{animation:perroSalta .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes perroSalta{0%{margin-bottom:0}45%{margin-bottom:34px}100%{margin-bottom:0}}
#perro.cava{animation:perroCava .18s steps(1) infinite}
@keyframes perroCava{0%,100%{transform:translate3d(var(--px,0),0,0) rotate(0)}
  50%{transform:translate3d(calc(var(--px,0) + 2px),2px,0) rotate(-3deg)}}
#perro.sacude{animation:perroSacude .12s steps(1) 6}
@keyframes perroSacude{0%,100%{margin-left:0}50%{margin-left:4px}}

/* ── Bocadillo ── */
#perro-dice{
  position:fixed; z-index:851; max-width:min(260px,68vw);
  background:var(--blanco,#fff); color:var(--negro,#0b0b0b);
  border:2px solid var(--negro,#0b0b0b);
  padding:.6rem .85rem; font-family:var(--sans,system-ui);
  font-size:.82rem; font-weight:600; line-height:1.35;
  box-shadow:4px 4px 0 var(--negro,#0b0b0b);
  opacity:0; transform:translateY(8px) scale(.94); transform-origin:bottom left;
  transition:opacity .25s, transform .3s cubic-bezier(.2,1.3,.5,1);
  pointer-events:none;
}
#perro-dice.on{opacity:1;transform:none;pointer-events:auto}
#perro-dice::after{
  content:''; position:absolute; left:18px; bottom:-8px;
  width:0;height:0;border:7px solid transparent;
  border-top-color:var(--negro,#0b0b0b); border-bottom:0;
}
#perro-dice b{color:var(--amarillo-bajo,#c99e1c)}
#perro-dice a{
  display:inline-block; margin-top:.45rem; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:800; text-decoration:none;
  background:var(--negro,#0b0b0b); color:var(--blanco,#fff); padding:.4rem .75rem;
}
#perro-dice a:hover{background:var(--amarillo,#f2c230);color:var(--negro,#0b0b0b)}
#perro-dice .cerrar{
  position:absolute;top:-10px;right:-10px;width:22px;height:22px;line-height:18px;
  background:var(--negro,#0b0b0b);color:#fff;border:0;border-radius:50%;
  font-size:14px;cursor:pointer;pointer-events:auto
}

/* ── Partículas al cavar ── */
.perro-tierra{
  position:fixed;z-index:849;width:5px;height:5px;background:var(--negro,#0b0b0b);
  pointer-events:none;opacity:.75
}

/* elemento que el perro "sacude" */
.perro-mordido{animation:mordido .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes mordido{0%,100%{transform:none}
  25%{transform:rotate(-1.6deg) translateX(-4px)}
  60%{transform:rotate(1.4deg) translateX(4px)}}

@media (max-width:640px){ #perro{width:78px;height:51px} }

@media (prefers-reduced-motion:reduce){
  #perro,#perro-dice{display:none !important}
}