#moleBoard {
--mole-size: 4;

width: 400px;
height: 400px;

margin: 0px auto;

display: grid;
grid-template-columns: repeat(var(--mole-size), minmax(0, 1fr));
grid-template-rows: repeat(var(--mole-size), minmax(0, 1fr));

gap: 24px;
padding: 24px;

box-sizing: border-box;

background-color: #eeeeee;
border: 2px solid #000033;
border-radius: 4px;

user-select: none;

}

/* =========================================================
Cases de la grille
========================================================= */

.mole-cell {
width: 100%;
height: 100%;

min-width: 0;
min-height: 0;

position: relative;

padding: 0px;

border: 2px solid #bbbbbb;
border-radius: 10px;

background: linear-gradient(#FFFFFF, #E8E8E8);

cursor: pointer;

overflow: hidden;

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

box-sizing: border-box;

}

/* =========================================================
Taupe
========================================================= */

.mole-active::before {
content: "\1F439";

position: absolute;

width: 100%;
height: 100%;

left: 0px;
top: 0px;

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

font-size: 70px;
line-height: 1;

}

/* Yeux de la taupe */

.mole-active::after {
content: "";

position: absolute;

width: 10px;
height: 10px;

left: 38%;
top: 43%;

border-radius: 50%;

background-color: #1A1A1A;

box-shadow: 34px 0px 0px 0px #1A1A1A;

}

/* =========================================================
Grille 3 x 3
========================================================= */

#moleBoard[style*="--mole-size: 3"] {
width: 330px;
height: 330px;
}

/* =========================================================
Grille 4 x 4
========================================================= */

#moleBoard[style*="--mole-size: 4"] {
width: 400px;
height: 400px;
}

/* =========================================================
Grille 5 x 5
========================================================= */

#moleBoard[style*="--mole-size: 5"] {
width: 430px;
height: 430px;
}

.taupe-buttons {
margin-top: 15px;
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}

#commencer, #pauseBtn, #nouveau {
width: auto;
height: auto;
margin-bottom: 10px;
padding: 14px 16px !important;
border-radius: 8px;
border: 2px solid #2B7CFF;
background:
linear-gradient(
#FFFFFF,
#EEF6FF
);
cursor: pointer;
font-weight: 550;
font-size: 15px;
}

#gridSize, #speed {
font-size: 14px;
font-weight: bold;
padding: 5px;
outline: none;
border-color: #0066CC;
box-shadow: 0px 0px 0px 0.5px #0066CC;
border-radius: 3px;
}

#gridSize:hover, #speed:hover {
background-color: #F0F0F0;
color: #FF0000;
}

.devinernum {
margin-left: 0px;
margin-right: 0px;
margin-top: -10px;
margin-bottom: -10px;
}

.txtmobile {
display: none;
}

.txtnormal {
display: block;
}

@media only screen and (max-width:700px) {

#commencer, #pauseBtn, #nouveau {
padding: 16px 14px !important;
}

.txtmobile {
display: block;
}

.txtnormal {
display: none;
}

/* =========================================================
GRILLE SMARTPHONE
========================================================= */

#moleBoard {
    width: min(calc(100% - 50px), 100%) !important;
    max-width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;

margin-left: auto;
margin-right: auto;

gap: clamp(5px, 2vw, 12px);
padding: clamp(5px, 2vw, 12px);

box-sizing: border-box;

min-width: 0 !important;
min-height: 0 !important;

}

/* =========================================================
FORCER LES GRILLES 3x3, 4x4 ET 5x5 À S'ADAPTER
========================================================= */

#moleBoard[style*="--mole-size: 3"],
#moleBoard[style*="--mole-size: 4"],
#moleBoard[style*="--mole-size: 5"] {
    width: min(calc(100% - 50px), 100%) !important;
    max-width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;

box-sizing: border-box;

}

/* =========================================================
CASES
========================================================= */

.mole-cell {
width: 100%;
height: 100%;

min-width: 0;
min-height: 0;

padding: 0px;

box-sizing: border-box;

border-radius: 8px;

}

/* =========================================================
TAUPE SUR PETIT ÉCRAN
========================================================= */

.mole-active::before {
font-size: clamp(28px, 12vw, 60px);
}

.mole-active::after {
width: clamp(5px, 2vw, 8px);
height: clamp(5px, 2vw, 8px);

box-shadow: clamp(16px, 7vw, 28px) 0px 0px 0px #1A1A1A;

}

}

/* =========================================================
   3x3 UNIQUEMENT - SMARTPHONE EN MODE PORTRAIT
   ========================================================= */

@media only screen and (max-width:700px) and (orientation:portrait) {

#moleBoard[style*="--mole-size: 3"] .mole-cell {
        width: 75%;
        height: 75%;
        margin: auto;
}

}

/* =========================================================
   4x4 UNIQUEMENT - SMARTPHONE EN MODE PORTRAIT
   ========================================================= */

@media only screen and (max-width:700px) and (orientation:portrait) {

#moleBoard[style*="--mole-size: 4"] .mole-cell {
        width: 80%;
        height: 80%;
        margin: auto;
}

}

/* =========================================================
Écrans de 701 à 900 px
========================================================= */

@media only screen and (min-width:701px) and (max-width:900px) {

#moleBoard {
    width: 100%;
    max-width: 430px;

    height: auto;
    aspect-ratio: 1 / 1;

    margin-left: auto;
    margin-right: auto;

    gap: 18px;
    padding: 18px;

    box-sizing: border-box;

    min-width: 0;
}

.mole-active::before {
    font-size: 70px;
}

.mole-active::after {
    width: 8px;
    height: 8px;

    box-shadow: 28px 0px 0px 0px #1A1A1A;
}

.txtmobile {
    display: block;
}

.txtnormal{
    display: none;
}

}