.minesweeper-wrapper {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.mine-game {
    width: 100%;
    max-width: 750px;
}

.game-header {
    text-align: center;
    margin-bottom: 10px;
}

.game-screen {

    background: #0f0f18;

    border-radius: 14px;

    padding: 15px;

    box-shadow: 0 0 25px rgba(124, 77, 255, .25);

    position: relative;

}

/* BOARD */

#mineBoard {

    display: grid;
    gap: 5px;

    width: 100%;

    margin-bottom: 10px;

}

/* TILE */

.tile {

    aspect-ratio: 1/1;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;

    font-size: clamp(14px, 2vw, 22px);

    border-radius: 6px;

    background: #1e1e2f;

    cursor: pointer;

    transition: .15s;

}

.tile:hover {
    background: #2a2a40;
}

.tile.revealed {
    background: #303040;
    cursor: default;
}

.tile.mine {
    background: #ff4c4c;
}

.tile.flag {
    background: #7c4dff;
}

/* NUMBER COLORS */

.tile[data-num="1"] {
    color: #00aaff
}

.tile[data-num="2"] {
    color: #00d26a
}

.tile[data-num="3"] {
    color: #ff4c4c
}

.tile[data-num="4"] {
    color: #8c52ff
}

.tile[data-num="5"] {
    color: #ff7a00
}

.tile[data-num="6"] {
    color: #00e1ff
}

/* BAR */

.game-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}

/* STATS */

.game-stats {

    display: flex;

    gap: 15px;

}

.stat span {
    display: block;
    font-size: 12px;
    opacity: .7;
}

/* BUTTON */

.game-btn {

    padding: 8px 18px;

    border-radius: 8px;

    border: none;

    cursor: pointer;

    font-size: 14px;

}

.game-btn.primary {
    background: #7c4dff;
    color: white;
}

.game-btn.secondary {
    background: #1f1f2f;
    color: white;
    border: 1px solid #7c4dff;
}

/* OVERLAY */

.overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, .9);

    border-radius: 14px;

    opacity: 0;

    pointer-events: none;

    transition: .25s;

}

.overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* DIFFICULTY */

.difficulty-group {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}



/* MOBILE */

@media(max-width:600px) {

    .game-stats {
        justify-content: center;
    }

}