@media (min-width: 600px) {
    #map {
        font-size: 30px;

        /* scale board with screen */
        --cell-size: min(7vmin, 70px);
    }


}

@media (max-width: 600px) {
    #map {
        font-size: 20px;
        /* keep the full board visible on narrow screens */
        --cell-size: min(
            36px,
            calc((100vw - (var(--cols) - 1) * var(--gap) - (var(--pad) * 2)) / var(--cols)),
            calc((100dvh - var(--ui-reserve) - (var(--rows) - 1) * var(--gap) - (var(--pad) * 2)) / var(--rows))
        );
    }
    

}

#map {
    margin-inline: auto;
    width: fit-content;   /* ← magic line */
    max-width: 100vw;
    box-sizing: border-box;

    --cell-size: 50px;
    --cols: 10;
    --rows: 10;
    --gap: 2px;
    --pad: 2px;
    --ui-reserve: 220px;

    display: grid;
    gap: var(--gap);
    padding: var(--pad);

    grid-template-columns: repeat(var(--cols), var(--cell-size));
}

.fog:hover {
    background-color: #9a9a9a;
}

.cell:active {
    transform: scale(0.95);
}

.cell[data-num="1"]::after { color: #1976d2; }
.cell[data-num="2"]::after { color: #388e3c; }
.cell[data-num="3"]::after { color: #d32f2f; }
.cell[data-num="4"]::after { color: #7b1fa2; }
.cell[data-num="5"]::after { color: #ef6c00; }
.cell[data-num="6"]::after { color: #00838f; }
.cell[data-num="7"]::after { color: #424242; }
.cell[data-num="8"]::after { color: black; }


.cell {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
        user-select: none;
    transition:
        background-color .15s ease,
        transform .08s ease;
    border: 1px grey dotted;
}



.ice,
.gente {
    animation: reveal .18s ease-out;
}

@keyframes reveal {
    from {
        transform: scale(.85);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


.cell::before {
    content: "";
}

/* ONLY cells that actually have an icon */
.cell[data-icon]:not([data-icon=""])::before {
    content: attr(data-icon);
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 1.4em;
    opacity: 0.9;
    line-height: 1;
    pointer-events: none;
}

.cell.ice::after, .cell.gente::after {
    color: black;
}

.cell:not(.ice):not(.gente)::after {
    color: blue;
}
.fog[data-num]:not([data-num=""])::after {
    /* flagged fog markers stand out from unrevealed cells */
    color: blue;
    
    background: rgba(255,255,255,0.75);
    border-radius: 6px;
    padding: 1px 4px;

    text-shadow: none;
}
.cell::after {
    content: attr(data-num);
    position: absolute;
    font-family: "Bree Serif", serif;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-weight: bold;
    font-size: 0.9em;
    
    line-height: 1;

    /* readability boost */
    text-shadow:
       0 1px 0 rgba(255,255,255,0.6),
        0 -1px 0 rgba(0,0,0,0.25);
}

.both {
    color: green;
}

.fog,
.gente {
    cursor: pointer;
}

.row {
    clear: both;
}

.gente {}

.fog {
    color: blue;
       background: linear-gradient(
        145deg,
        #9c9c9c,
        #7f7f7f
    );
}

.fog_conflict {
    background-color: darkgray;
}

.ice {
    border: 1px blue solid;
    color: lightblue;
}

.context-menu {
    position: absolute;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 150px;
}

.context-menu__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu__item {
    padding: 8px 12px;
    cursor: pointer;
}

.context-menu__item:hover {
    background-color: #f0f0f0;
}

.pressed{
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
    filter: brightness(0.95);
}

.wrong{
    background: linear-gradient(
        145deg,
        #b07a7a,
        #8f5c5c
    );
}