/* El astronauta acompañante (lo monta assets/astronauta-guia.js).
   · El lienzo es pequeño y se mueve con transform; no recibe clics (los recoge .guia-toque,
     del tamaño del cuerpo, para no tapar nada de lo que hay alrededor).
   · z-index 80–84: por debajo de la barra (100), del botón de los ovnis (85) y de la carga (1000). */
.guia-lienzo{position:fixed;left:0;top:0;z-index:80;display:block;pointer-events:none;opacity:0;visibility:hidden;
  will-change:transform;contain:strict;
  filter:drop-shadow(0 14px 18px rgb(18 6 52 / .32));
  transition:opacity .45s ease,visibility 0s linear .45s}
.guia-lienzo.ver{opacity:1;visibility:visible;transition:opacity .45s ease}
.guia-lienzo.claro{filter:drop-shadow(0 14px 18px rgb(60 30 140 / .22))}
.guia-lienzo.juego{display:none}

.guia-toque{position:fixed;left:0;top:0;z-index:81;margin:0;padding:0;border:0;border-radius:42%;background:transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent;will-change:transform}
.guia-toque[hidden]{display:none}
.guia-toque:focus-visible{outline:2px solid #c9b8ff;outline-offset:4px}

/* bocadillo: cristal oscuro con filo violeta, Inter; un punto que late como «está hablando» */
.guia-bocadillo{position:fixed;left:0;top:0;z-index:82;pointer-events:none;width:max-content;max-width:min(230px,calc(100vw - 24px));--cola:24px}
.guia-burbuja{position:relative;display:flex;align-items:center;gap:9px;padding:9px 14px 10px 12px;border-radius:14px;
  background:linear-gradient(180deg,rgb(34 25 66 / .9),rgb(15 11 32 / .9));border:1px solid rgb(169 139 255 / .38);
  color:#f2eeff;font:500 13px/1.3 "Inter",system-ui,sans-serif;letter-spacing:-.01em;text-wrap:balance;
  box-shadow:0 16px 40px -18px rgb(107 43 255 / .8),inset 0 1px 0 rgb(255 255 255 / .09);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  opacity:0;transform:translateY(8px) scale(.86);transform-origin:var(--cola) 100%;
  transition:opacity .28s ease,transform .5s cubic-bezier(.2,1.5,.35,1)}
.guia-burbuja.ver{opacity:1;transform:none}
.guia-burbuja::after{content:"";position:absolute;left:calc(var(--cola) - 6px);bottom:-6px;width:11px;height:11px;transform:rotate(45deg);clip-path:polygon(100% 0,100% 100%,0 100%);
  background:rgb(15 11 32 / .95);border-right:1px solid rgb(169 139 255 / .38);border-bottom:1px solid rgb(169 139 255 / .38);border-bottom-right-radius:3px}
.abajo .guia-burbuja{transform-origin:var(--cola) 0}
.abajo .guia-burbuja::after{bottom:auto;top:-6px;transform:rotate(225deg);background:rgb(34 25 66 / .95)}
.guia-punto{flex:none;width:6px;height:6px;border-radius:50%;background:#a98bff;box-shadow:0 0 0 3px rgb(143 99 255 / .2),0 0 10px #8f63ff;
  animation:guia-late 1.4s ease-in-out infinite}
.guia-texto{white-space:normal}
@keyframes guia-late{50%{transform:scale(.6);opacity:.6}}

.guia-bocadillo.claro .guia-burbuja{background:rgb(255 255 255 / .92);color:#17122b;border-color:rgb(107 43 255 / .22);
  box-shadow:0 18px 40px -20px rgb(60 20 160 / .45),inset 0 1px 0 #fff}
.guia-bocadillo.claro .guia-burbuja::after{background:#fff;border-color:rgb(107 43 255 / .22)}
.guia-bocadillo.claro .guia-punto{background:#6b2bff;box-shadow:0 0 0 3px rgb(107 43 255 / .14)}

/* botoncito para llamarlo después de despedirlo (abajo a la izquierda: la derecha es de los ovnis) */
.guia-volver{position:fixed;left:22px;bottom:22px;z-index:84;height:46px;padding:0 16px 0 12px;border-radius:999px;display:flex;align-items:center;gap:8px;cursor:pointer;font:500 13px/1 "Inter",system-ui,sans-serif;letter-spacing:-.01em;
  color:#c9b8ff;background:radial-gradient(circle at 50% 0%,rgb(143 99 255 / .25),transparent 70%),rgb(12 9 24 / .78);border:1px solid rgb(157 123 255 / .34);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 12px 28px -16px rgb(107 43 255 / .9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(10px) scale(.8);transition:opacity .3s,transform .45s cubic-bezier(.2,1.4,.35,1),border-color .3s,color .3s;-webkit-tap-highlight-color:transparent}
.guia-volver[hidden]{display:none}
.guia-volver.ver{opacity:1;transform:none}
.guia-volver:hover{border-color:#a98bff;color:#fff;transform:translateY(-2px)}
.guia-volver:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.guia-volver svg{width:22px;height:22px;flex:none}
.guia-volver-txt{white-space:nowrap}
.guia-volver.claro{color:#5b21d6;background:rgb(255 255 255 / .9);border-color:rgb(107 43 255 / .25);box-shadow:0 12px 28px -18px rgb(60 20 160 / .5)}

html.modo-carrera .guia-volver,html.modo-ovni .guia-volver,html.modo-asteroides .guia-volver,html.modo-constructor .guia-volver,
html.modo-bugs .guia-volver,html.modo-dificil .guia-volver,
html.modo-carrera .guia-bocadillo,html.modo-ovni .guia-bocadillo,html.modo-asteroides .guia-bocadillo,html.modo-constructor .guia-bocadillo,
html.modo-bugs .guia-bocadillo,html.modo-dificil .guia-bocadillo,
html.modo-carrera .guia-toque,html.modo-ovni .guia-toque,html.modo-asteroides .guia-toque,html.modo-constructor .guia-toque,
html.modo-bugs .guia-toque,html.modo-dificil .guia-toque{display:none}

@media (max-width:640px){
  .guia-volver{left:14px;bottom:14px;height:42px;padding:0 10px}
  .guia-volver-txt{display:none}
  .guia-burbuja{font-size:12px;padding:7px 11px 8px 10px;gap:7px}
}
@media (prefers-reduced-motion:reduce){
  .guia-lienzo,.guia-burbuja,.guia-volver{transition:none}
  .guia-punto{animation:none}
}