.hole {
    aspect-ratio: 1;
    background-color: #a8a29e; /* stone-400 */
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="black" d="M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.69L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-4.5 0a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/></svg>'), auto; 
    /* Ideally a Hammer cursor, but generic for now */
    border-bottom: 8px solid #78716c; /* stone-500 */
    touch-action: manipulation;
}

.dirt {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background-color: #78716c;
    z-index: 20;
    border-radius: 0 0 50% 50%;
}

.mole {
    width: 70%;
    height: 90%;
    background-color: #d97706; /* amber-600 */
    position: absolute;
    top: 100%; /* Hidden */
    left: 15%;
    border-radius: 40% 40% 10% 10%;
    transition: top 0.4s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.mole::after {
    content: "👀";
    font-size: 2rem;
}

.hole.up .mole {
    top: 10%;
}