body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    overscroll-behavior-y: contain;
}

.nav-container {
    position: fixed;
    top: 20px;
    left: 0;      /* Forzamos que empiece pegado a la izquierda */
    right: 0;     /* Forzamos que termine pegado a la derecha */
    width: auto;  /* Quitamos el 100% para que use left/right */
    display: flex;
    justify-content: space-between;
    padding: 0 40px; /* Aumentamos un poco el margen para que no roce el borde */
    z-index: 1000;
    pointer-events: none;
    box-sizing: border-box;
}

.arrow-btn {
    pointer-events: auto; /* Activamos clicks solo en las flechas */
    transition: transform 0.3s ease;
}

.arrow-btn:hover {
    transform: scale(1.2);
}

.arrow-btn img {
    width: 100px; /* Ajusta según tu imagen */
    height: auto;
}

#escena {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url('https://i.pinimg.com/1200x/e5/03/0c/e5030c9c8ded2d5ee6dc218b4046e199.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; 
}

.erizo {
    position: absolute;
    width: 200px; /* Tamaño normal para computadora */
    cursor: grab;
    user-select: none;
    touch-action: none; /* Importante: evita que el navegador haga scroll mientras mueves el erizo */
    transition: transform 0.1s ease;
    z-index: 10;
}

.erizo img {
    width: 100%;
    height: auto;
    pointer-events: none;
}

.erizo.dragging {
    cursor: grabbing;
    transform: scale(1.1);
    z-index: 1000;
}

.erizo11{
 top: 25%; 
 left: 45%; 
}

.erizo2{
  top: 70%;
  left: 25%;
}

.erizo3{
 top: 70%;
 left: 45%
}

.erizo4{
  top: 60%; 
  left: 70%;
}

html, body {
    /* Reemplaza el link por el de tu imagen en Catbox */
    cursor: url('https://cdn.cursors-4u.net/css-previews/cute-red-cloud-aa5d6654-css.webp'), auto;
}

/* Para que también cambie cuando pasas sobre links o botones */
a, nav, erizo, music {
    cursor: url('https://cdn.cursors-4u.net/css-previews/cute-red-spinning-flower-195c4662-css.webp'), pointer !important;
}

/* --- AJUSTES PARA CELULAR --- */
@media (max-width: 768px) {
    /* Evitamos que el padding sume ancho extra */
    * {
        box-sizing: border-box;
    }

    .nav-container {
        top: 10px; /* Un poco más arriba en pantallas pequeñas */
        padding: 0 15px; /* Menos espacio a los lados */
    }

    .arrow-btn img {
        width: 50px; /* Flechas a la mitad de tamaño para que no tapen la casa */
    }
    
    .erizo11{
      top: 28%;
      left: 30%;
      width: 180px;
    }
    
    .erizo2{
      top: 65%;
      left: 10%;
      width: 120px;
    }
    
    .erizo3{
     top: 70%;
     left: 40%;
     width:100px;
    }
    
    .erizo4{
      top: 55%; 
      left: 60%;
      width:130px;
    }
        
    #escena {
        /* "cover" a veces corta mucho los lados en vertical. 
           Si quieres ver más paisaje, puedes probar "100% 100%" 
           pero "cover" con el focus al centro suele ser lo mejor. */
        background-position: center center; 
    }
}