.map-node {
    position: absolute;
    width: 80px;
    height: 80px;
    left: calc(var(--horizontal-percentage) * 1%);
    top: calc(var(--vertical-percentage) * 1%);
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 15;
    display: flex;
    justify-content: center;
    align-items: center;
}

.node-stone {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #a5927d, #5d4b38);
    border: 3px solid #3d2f21;
    box-shadow: 0 6px 0 #3d2f21, 0 12px 18px rgba(0, 0, 0, 0.6);
    transform: rotateX(45deg);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        background 0.5s ease-in-out,
        filter 0.3s ease;
    position: relative;
}

.map-node.revealed:hover .node-stone {
    transform: rotateX(45deg) translateY(-4px);
    box-shadow: 0 10px 0 #3d2f21, 0 18px 24px rgba(0, 0, 0, 0.8);
    filter: brightness(1.15) drop-shadow(0 0 8px var(--color-accent));
}

.map-node.shining .node-stone {
    filter: brightness(1.25) drop-shadow(0 0 16px var(--color-accent));
    animation: nodeShine 1.8s infinite alternate cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.map-node.visited .node-stone {
    background: linear-gradient(135deg, #ffd700, #b8860b);
    border: 3px solid #5a4200;
    box-shadow: 0 6px 0 #5a4200, 0 12px 18px rgba(255, 215, 0, 0.4);
}

.map-node.visited:hover .node-stone {
    transform: rotateX(45deg) translateY(-4px);
    box-shadow: 0 10px 0 #5a4200, 0 18px 24px rgba(255, 215, 0, 0.6);
    filter: brightness(1.1) drop-shadow(0 0 10px var(--color-gold));
}

.map-node.dead-end.revealed .node-stone {
    background: linear-gradient(135deg, #e06c60, #8f2920);
    border: 3px solid #55140e;
    box-shadow: 0 6px 0 #55140e, 0 12px 18px rgba(224, 108, 96, 0.4);
}

.map-node.finish.revealed .node-stone {
    background: linear-gradient(135deg, #6ec08b, #286842);
    border: 3px solid #143c24;
    box-shadow: 0 6px 0 #143c24, 0 12px 18px rgba(110, 192, 139, 0.4);
}

.map-node.shining {
    z-index: 110;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

@keyframes nodeShine {
    0% {
        transform: rotateX(45deg) scale(1);
        box-shadow: 0 6px 0 #3d2f21, 0 8px 15px rgba(207, 168, 110, 0.3);
    }

    100% {
        transform: rotateX(45deg) scale(1.12);
        box-shadow: 0 6px 0 #3d2f21, 0 16px 30px rgba(207, 168, 110, 0.75);
    }
}