#click-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
    pointer-events: none;
    z-index: 100;
    transform: translate(-50%, -50%);
}

/* transparent overlay */
#level-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.22);
    /* must be semi-transparent for blur to show */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Safari */
    z-index: 50;
}

#level-overlay.hidden {
    display: none;
}

/* ===== Inner layout only (no blur, no z-index here) ===== */
.ls-wrap {
    width: min(1100px, 92vw);
    pointer-events: none;
    /* block pointer by default... */
}

.ls-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 3vw, 28px);
    justify-items: center;
    pointer-events: auto;
    /* ...but allow clicks on buttons */
}

/* Image buttons */
.ls-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
}

.ls-btn img {
    display: block;
    width: min(280px, 26vw);
    height: auto;
}

/* Dialog area shown together with buttons */
.ls-dialog {
    margin: clamp(10px, 2vw, 18px) auto 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    /* decorative only */
}

.ls-dialog-img {
    width: min(960px, 92vw);
    height: auto;
    display: block;
}

/* Utility */
.hidden {
    display: none;
}