body{
  margin:0;
  font-family:var(--font-sans);
  background:linear-gradient(180deg,var(--bg),#031022);
  color:#e6f3ff;
}

.cellule{
  display:inline-block;
  width:var(--tile-size,30px);
  height:var(--tile-size,30px);
  box-sizing:border-box;
  background:#000; 
  border:1px solid rgba(255,255,255,0.06);
  border-radius:6px;
  vertical-align:top;
  text-align:center;
  line-height:var(--tile-size,30px); 
  font-weight:800;
  color:transparent; 
  user-select:none;
  overflow:hidden;
  font-size:calc(var(--tile-size,30px) * 0.5); 
}
.cellule.flagged{
    background-color: var(--flag,#ffb86b);
}
.cellule.revealed{
  background:var(--tile-revealed,#eaf6ff);
  color:var(--reveal-color,#072133);
}
.cellule.revealed.number-0{
  background:#ffffff;
  color:transparent;
  border:1px solid rgba(0,0,0,0.06);
}
.cellule.revealed.number-1{ color:#2b8cff; font-size:calc(var(--tile-size,30px) * 0.55); }
.cellule.revealed.number-2{ color:#2bbf4a; font-size:calc(var(--tile-size,30px) * 0.53); }
.cellule.revealed.number-3{ color:#ff6b6b; font-size:calc(var(--tile-size,30px) * 0.51); }
.cellule.revealed.number-4{ color:#5a4bd6; font-size:calc(var(--tile-size,30px) * 0.49); }
.cellule.revealed.number-5{ color:#d85f5f; font-size:calc(var(--tile-size,30px) * 0.47); }
.cellule.revealed.number-6{ color:#4aa6b8; font-size:calc(var(--tile-size,30px) * 0.45); }
.cellule.revealed.number-7{ color:#2b2b2b; font-size:calc(var(--tile-size,30px) * 0.43); }
.cellule.revealed.number-8{ color:#6b6b6b; font-size:calc(var(--tile-size,30px) * 0.43); }
.cellule.flagged{background:#000; color:var(--flag,#ffb86b)}
.cellule.mine.revealed{background:#ffb3b3; color:var(--mine,#ff6b6b)}
#reset-button{
  margin-top:1rem;
  padding:0.5rem 1rem;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
}
#loose-screen{
    display: none;
}
#win-screen{
    display: none;
}