/* Shared map element styles — editor (index.html) + mobile viewer (mobile.html) */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
}

/* --- MAP WRAPPER --- */
.map-wrapper {
    position: relative;
    container-type: inline-size;
}

.map-wrapper > img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* --- DOTS --- */
.dot {
    position: absolute;
    width: 5.237%;
    aspect-ratio: 129 / 131;
    margin-left: -2.618%;
    margin-top: -2.659%;
    z-index: 10;
    user-select: none;
}

.dot img {
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-drag: none;
}

.dot .label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-bottom: 2%;
    font-size: 2.7cqi;
    font-weight: 700;
    color: #000;
    pointer-events: none;
}

.dot.dot-blue .label,
.dot.dot-green .label {
    color: #fff;
}

/* --- EXTRAS --- */
.extra {
    position: absolute;
    z-index: 11;
    user-select: none;
}

.extra-icon {
    width: 3%;
}

.extra-icon img {
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
}

.extra-text {
    font-size: 1.2cqi;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

/* --- LOGOS --- */
.logo {
    position: absolute;
    user-select: none;
    width: 5%;
    mix-blend-mode: multiply;
}

.logo img {
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
    filter: grayscale(100%) contrast(1.2);
}