.map {
    height: auto;
    width: 100vw;
    position: relative;
}

.map img {
    width: 100%;
    height: auto;
    display: block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.node {
    position: absolute;
    transform: translate(-50%, -50%);
    
    width: 12%;
    aspect-ratio: 1 / 1;
    
    background-color: transparent;
    border: none;
    color: var(--col-2);
    font-size: 2.5rem;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.node-1 { top: 10.5%; left: 20%; }
.node-2 { top: 21.2%; left: 80%; }
.node-3 { top: 35.2%; left: 30%; }
.node-4 { top: 47.7%; left: 60%; }
.node-5 { top: 58.0%; left: 31%; }
.node-6 { top: 72.3%; left: 30%; }
.node-7 { top: 82.7%; left: 71%; }
.node-8 { top: 93.5%; left: 20%; }.node.locked { opacity: .35; filter: grayscale(1); cursor: not-allowed; }
.node.done { color: #5cff5c; }
.node.active { animation: puls 1s infinite; background: rgba(255,215,0,.35); border-radius: 50%; box-shadow: 0 0 18px 6px gold; }
@keyframes puls { 50% { transform: translate(-50%,-50%) scale(1.15); } }
#klaar { position: fixed; inset: auto 0 0 0; padding: 1rem; background: gold; color: #000; text-align: center; font-size: .8rem; }